ページ離脱時にポップアップ表示
formのsubmitの際はポップアップ非表示
<h1>商品ページ</h1>
<form action="/" method="get" id="form" class="form-example">
<div class="form-example">
<label for="name">商品名: </label>
<input type="text" name="name" id="name" value="チョコレート">
</div>
<div class="form-example">
<label for="name">購入者名: </label>
<input type="text" name="name" id="name">
</div>
<div class="form-example">
<label for="email">個数: </label>
<input type="number" name="number" value="1">
</div>
<div class="form-example">
<input type="submit" value="今すぐ購入">
</div>
</form>
<br><br>
<a href="/">リンク</a>
<script>
var onBeforeunloadHandler = function(e) {
e.returnValue = 'ページから離れます。よろしいでしょうか?';
};
window.addEventListener('beforeunload', onBeforeunloadHandler, false);
const path = location.pathname;
var cookies = document.cookie;
var cookiesArray = cookies.split(';');
for(var c of cookiesArray){
var cArray = c.split('=');
if( cArray[0] == 'page' && cArray[1] == path){
window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
}
}
const form = document.getElementById('form');
form.addEventListener('submit', function(e) {
window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
}, false);
var date1,date2;
var kigen = 1;
date1 = new Date();
date1.setTime(date1.getTime() + kigen*24*60*60*1000);
date2 = date1.toGMTString();
document.cookie = "page=" + path+";expires=" + date2;
</script>