Open modal entry

Navigation
0

I want to open the modal while loading the page 

jQuery(document).ready(function(e) {
    jQuery('#mymodal').trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Currently it opens with a button, but I do not want that button, I want it to open only once at the beginning of the page

    
asked by hubman 04.01.2019 в 03:43
source

2 answers

3

jQuery(document).ready(function(e) {
    jQuery('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

I used a simple code so that when the document is ready the modal is shown with jQuery(selector).modal('show') .

as you see it is possible to open it directly from the code, also there are more options here I leave the documentation Modal Options Via Js

Edit :

As you commented that you want it to be hidden automatically after 5 seconds you must add the following code that will be executed after an interval of 5000 milliseconds ie 5 seconds. 

setTimeout(function(){ 
  jQuery("#mymodal").fadeOut(); 
}, 5000);
    
answered by 04.01.2019 в 04:18
0

Here you have an elegant solution: 

$(document).ready(function() {
    $("#mymodal").modal("show");

    setTimeout(function(){
        $("#mymodal").fadeOut();
    }, 5000);
});
    
answered by 04.01.2019 в 04:58
Error with the commandant runnerver of Django disable popup blocking