• Custom Printed T-shirts
  • Seo Expert
  • Bisen Infotech
  • Khaali Paper

On page load show Modal Popup

Very simple way of creating Bootstrap Modal Popup. Included are the modal header, modal body (required for padding), and modal footer (optional).

They can be used to display alert message, images, and videos in a website. To trigger the modal popup, you'll need to include a link or a button.

To Create Bootstrap Modal Popup it takes following steps:-

  1. Include the css and js file of bootstrap.
  2. Give the unique id name of modal popup and write javscript for on load show modal popup at to bottom of page.
  3. Copy the enter popup code and paste inside the page bottom just above the js files.
  • Html
  • JavaScript
  • Example
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#exampleModal").modal('show');
    });
</script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>On page load show Modal Popup !</h1>

    <!-- Modal -->
    <div id="idname" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            Modal body text goes here.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="http://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("#exampleModal").modal('show');
      });
  </script>
  </body>
</html>

In this tutorial we learn that how to create bootstrap modal poup on page load using bootstrap css and js file, have to include to initialization javascript code for a default popup open on page load.

On page load show popup