ポップアップを1回だけ表示する

ポップアップを1回だけ生成しようとしています。現在のポップアップが機能していません。私はここにいるので、私はこれを管理することができません。いいえ助けてくださいポップアップを1回だけ表示する

ここに私のjqueryコードです。私は、これは

$(document).ready(function() { 
 
      if (localStorage.getItem('popState') != 'shown') { 
 
       $("#popup").delay(2000).fadeIn(); 
 
       localStorage.setItem('popState', 'shown') 
 
      } 
 
     
 
      $('#popup-close').click(function (e) // You are clicking the close button 
 
      { 
 
       $('#popup').fadeOut(); // Now the pop up is hiden. 
 
      }); 
 
      $('#popup').click(function (e) { 
 
       $('#popup').fadeOut(); 
 
      }); 
 
     });

div{ 
 
     height : 50px; 
 
     background-color:blue; 
 
    }

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    
 
    </head> 
 
    <body> 
 
    
 
     <div class="modal fade" id="popup" > 
 
      <div class="modal-dialog"> 
 
      <div class="model-image"> 
 
       <div class="modal-header"> 
 
       <button type="button" class="popup-close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
       
 
       </div> 
 
       <div class="modal-body"> 
 
     \t <div class="model-titles"> <div class="delivery"></div></div> 
 
       <div class="custom-discount"> <div class="amt"></div></div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
    </body>

出典

2017-11-06 hack next

おそらく 'id =" popup "' 'id ="＃popup "'（no＃）が必要です。 'class ="＃popup-close "と同じです。 – j08691

j08691 @ ok Poupが動作しています。ブラウジングの後、これは永遠の時間になります。そして私はユーザーセッションに基づいてポップアップを1回だけ生成しようとしています –

ユーザーセッションに変数を保存しますか？ –

はあなたがここにかなり近いです助けしなさい働いていない理由を知りません。今のところ、localStorageの項目が設定されているかどうかに関係なく、モーダルのdivをdisplay: noneに設定すると、常に表示されます。ここに私がすることがあります。

CSS：

.modal { 
    display: none; 
}

JS：このコードで

if (localStorage.getItem('popState', 'value') != 'shown') { 
    $("#popup").delay(2000).fadeIn(); 
    localStorage.setItem('popState', 'shown'); 
    console.log('localstorage item set.'); 
} else { 
    console.log('No modal for you.'); 
} 

$('#popup-close').on('click', function(e) { 
    $('#popup').fadeOut(); // Now the pop up is hiden. 
}); 

$('#popup').on('click', function(e) { 
    $('#popup').fadeOut(); 
});

、あなたはそれが設定されていない場合、それはモーダルにフェードインします、popstate値が設定されていることを確認するためにチェックします2秒後にlocalStorageアイテムを設定し、コンソールに「localStorage item set」を記録します。これを使用していたページをリロードすると、「あなたのためのモーダルはありません」と表示されます。コンソールにログオンする。 console.logの項目はテスト目的のためのものなので、このコードを本番環境で使用する準備ができたら、それらを削除します。

出典

2017-11-06 19:56:56

ポップアップを1回だけ表示する

答えて

関連する問題