Question

我试图只生成一次弹出窗口。当前弹出窗口无效。我是新来的，所以我无法管理这个。请帮忙

这是我的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">
        	   <div class="model-titles"> <div class="delivery"></div></div>
                <div class="custom-discount"> <div class="amt"></div></div>
              </div>
            </div>
          </div>
        </div>

    </body>

Answer 1

你离这儿很近。我会将模态div设置为display: none，因为现在，无论localStorage项是否设置，它都将始终可见。这就是我要做的事。

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值，如果未设置，它将在该两秒标记后淡入模态，设置localStorage项并将记录＆＃ 34; localStorage项目集＆＃34;到控制台。如果你要重新加载你正在使用它的页面，你会看到＆＃34;没有你的模态。＆＃34;登录到控制台。 console.log项仅用于测试目的，因此当您准备在生产环境中使用此代码时，我会将其删除。

弹出窗口只显示一次

1 个答案: