第一次只有我想显示引导模态

时间:2017-05-11 17:59:23

标签: php jquery session twitter-bootstrap-3 local-storage

这里我想做的是当用户第一次来到我的页面时我想在这个页面中显示模态,假设用户想要第二页并再次到页面到第一页也是模态不应该显示,我试了很多但我无法得到答案,任何帮助我



$(document).ready(function() {
    var isshow = localStorage.getItem('isshow');
    if (isshow== null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#myModal').modal('show');
    }
    else{
    alert('else part');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
 <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</div>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

请检查这个小提琴链接。 Fiddle Link您的代码工作正常,并且很好地使用localstorage。

$(document).ready(function() {
    var isshow = localStorage.getItem('isshow');
    if (isshow === null) {
        localStorage.setItem('isshow', 1);
        // Show popup here
        $('#myModal').modal('show');
    } else {
      alert('else part');
    }
});