CODEWITHSUNDEEP
javascripthtmlmodal-dialog
Richard Cooper
Richard Cooper

Reputation: 9

Automatically open modal on page load

Ok a bit more explanation for the title, i have a modal that was from a template I bought that only really showed how to open it with a button, but I want the modal to show upon page load.

The problem is it doesn't open upon page load using this code:

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
            var modal = document.getElementById('myModal');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];

// When the user clicks on the button, open the modal
 $(window).on('load',function(){
  modal.style.display = 'block';
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = 'none';
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}
</script>

Upvotes: 0

Views: 4992

Answers (1)

kushal shah
kushal shah

Reputation: 863

please try this onload page

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

use this html if...

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

hope above code will help you and below link will also helpful

Launch Bootstrap Modal on page load

thanks

Upvotes: 1

Related Questions