Issue on using bootstrap modal as adult content warning

Question

I'm trying to make a content warning for a wordpress site project with some potentially mature contents. I tried using bootstrap modal which is called by jquery, but the problem is it only overlays the page when the whole page itself gets done loading.

It kills the purpose since the page will load first unblocked by the overlay.

I want to ask if there is a way to load and open the bootstrap modal before the page content/body starts loading. Or if there isn't any advisable ways on using the modal for such purpose, what are my possible alternatives? Thank you.

Answer 1

One possibility with jQuery would include wrapping your current web page inside a .page-wrap class with the css property of display: none .

Sibling to this .page-wrap you could create the page that will appear once everything has loaded, the .mature-content-warning that will have a button to continue to view the website.

Once the user clicks the .continue button, the page will load in.

  <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>