ポップアップをjsで一度だけ表示するにはどうすればいいですか？

私は30秒で期限切れのクッキーを作成しようとしています。この30秒間にユーザーがページを更新すると、Cookieが期限切れになったときにポップアップが表示されません。 30秒後にページを更新すると、ユーザーはそれを確認する必要があります。私の問題は、それがポップアップし続けることです、それは停止しません。どうやって止めることができますか？ポップアップをjsで一度だけ表示するにはどうすればいいですか？

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <!-- Bootstrap Core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <!-- Latest jQuery Library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <!-- Bootstrap Core JS --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
    <!-- Cookie JS for Modal --> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script> 
 
    <script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t \t $("#myModal").modal('show'); 
 
\t \t 
 
\t }); 
 
\t 
 
\t 
 
</script> 
 
<script> 
 
    function createCookie(name) { 
 
    debugger; 
 
    var date = new Date(); 
 
    date.setTime(date.getTime()+(30*1000)); 
 
    // alert(date); 
 
    var expires = "; expires="+date.toString(); 
 
    document.cookie = name+"="+expires+"; path=/"; 
 
//alert(document.cookie); 
 
} 
 
function showbanner() 
 
{ 
 
document.write('<div class="container-fluid"><div id="myModal" class="modal fade"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:[email protected]" target="_top">[email protected] </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>'); 
 
    
 
} 
 
    </script> 
 
    
 
</head> 
 

 
<body> 
 
<script> 
 
var ban = document.cookie; 
 

 
createCookie('banner'); 
 
if(ban==""){ 
 
showbanner(); 
 
} 
 

 
</script> 
 

 

 
    
 

 
</body> 
 
</html>

出典

2017-09-07 cdi

はと関係することかもしれませんコマンドのセミコロン – Brian

あなたの質問を新しいアカウントで[repost]（https://stackoverflow.com/questions/46081553/how-to-create-a-popup-with-cookies-in-javascript）しないでください。 –

@Brianありがとうございました。いいえ、私はそれをチェックしますが、論理はOKだと思いますか – cdi

私はクッキーの上にのlocalStorageを使用します。ただ、負荷の現在の日付を保存し、それが最後のロードよりも30秒以上であるかどうかを確認、有効期限を心配しないでください：

var lastVisited = window.localStorage.getItem('last visited'); 
console.log(
    'It has been', 
    Date.now() - 5000 > Date.parse(lastVisited) ? 'more' : 'less', 
    'than 5 seconds since your last visit.' 
) 
window.localStorage.setItem('last visited', new Date());

全ページ：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <!-- Bootstrap Core CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <!-- Latest jQuery Library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Bootstrap Core JS --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <!-- Cookie JS for Modal --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myModal").modal('show'); 

    }); 
    </script> 
    <script> 
    function showBanner(name) { 
     var lastVisited = window.localStorage.getItem('last visited'); 
     if (lastVisited == null || Date.now() - 5000 > Date.parse(lastVisited)) { 
     document.write('<div class="container-fluid"><div id="myModal" class="modal fade"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:[email protected]" target="_top">[email protected] </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>'); 
     } 
     window.localStorage.setItem('last visited', new Date()); 
    } 
    showBanner(); 
    </script> 
</head> 
<body> 
</body> 
</html>

出典

2017-09-07 17:29:50

@Svenありがとうございましたが、まだ仲間がいません – cdi

それはまだポップアップを続けます – cdi

@cdi投稿したHTMLを試してください。 –

ポップアップをjsで一度だけ表示するにはどうすればいいですか？

答えて

関連する問題