Smart Learning Tutorials

Online Tutorials Library

JavaScript

On page load show modal popup

admin
on page load show modal popup
On page load show Modal Popup

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

Demo

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

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

JavaScript

<script type="text/javascript">
    $(document).ready(function(){
        $("#exampleModal").modal('show');
    });
</script>

Example

<!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="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="jquery-3.2.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("#exampleModal").modal('show');
      });
  </script>
  </body>
</html>

On page load show Modal Popup

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

Learn HTML/CSS from W3 School Website

You May Also Like

Stop and auto-play videos after a modal open or closed

admin

Toggle show and hide div using javascript

admin

Redirect the Page-on-Page Load Using window.location

admin