javascript - 使用 Bootstrap 模式作为成人内容警告的问题

Question

我正在尝试为包含一些潜在成熟内容的 WordPress 网站项目发出内容警告。我尝试使用由 jquery 调用的 bootstrap 模式，但问题是它仅在整个页面本身加载完成时才覆盖页面。

它破坏了目的，因为页面将首先加载，不受覆盖层的阻止。

我想问是否有办法在页面内容/正文开始加载之前加载并打开 Bootstrap 模式。或者，如果没有任何建议的方法来使用模式来达到此目的，我可能的替代方案是什么？谢谢。

Answer 1

使用 jQuery 的一种可能性是将当前网页包装在 .page-wrap 类中，并使用 display: none 的 css 属性。

与此.page-wrap同级，您可以创建一个在所有内容加载后都会出现的页面，.mature-content-warning将有一个按钮继续查看网站。

一旦用户单击.Continue按钮，页面就会加载。

  <div class="page-wrap" style="display: none;">
    <h1>This is your site.</h1>
  </div>

  <div class="mature-content-warning">

    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Mature Content Warning</h4>
          </div>
          <div class="modal-body">
            <p class="lead">Are you 18 yrs old?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success continue" data-dismiss="modal">Yes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  </div>

  <!-- vendors -->
  <script src="vendors/jquery-1.11.3.min.js"></script>
  <script src="vendors/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {

      $(window).on('load', function() {
        $('#myModal').modal('show');
      });

      $('.continue').on('click', function() {
        $('.mature-content-warning').css('display', 'none');
        $('.page-wrap').fadeIn();
      });

    });
  </script>