发表新帖
发表新帖

How to open a Bootstrap modal window using jQuery?

后端 未结
关注
15 1842
闹比i
闹比i 2020-11-22 06:46

I\'m using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the \"submit button\" in the fo

相关标签:
15条回答
  • 小鲜肉
    2020-11-22 07:30

    Most often, when $('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work.

    Remove one of the links to make it work again.

    Furthermore, some plugins cause errors too, in this case add 

    jQuery.noConflict(); 
$('#myModal').modal('show');
    0 讨论(0)
  • 梦如初夏
    2020-11-22 07:30

    Try to use jQuery instead of $ sign when calling the function, it worked in my case as you can see below.

    jQuery.noConflict(); 
jQuery('#myModal').modal('show');

    jQuery.noConflict(); because when jQuery('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work. and it would resolve the problem in that case, as in my case it is repeating.

    Further you can go to this link

    Bootstrap Model Window Not Showing by Calling Through JQuery

    0 讨论(0)
  • Happy的楠姐
    2020-11-22 07:36

    Here is how to load bootstrap alert as soon as the document is ready. It is very easy just add 

     $(document).ready(function(){
   $("#myModal").modal();
});

    I made a demo on W3Schools.

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>

    0 讨论(0)
  • 一向
    2020-11-22 07:37

    I tried several methods which failed, but the below worked for me like a charm:

    $('#myModal').appendTo("body").modal('show');
    0 讨论(0)
  • 旧时难觅i
    2020-11-22 07:37

    Try

    $("#myModal").modal("toggle")

    To open or close the modal with id myModal.

    If the above is not working then it means bootstrap.js has been overridden by some other js file. Here is a solution

    1:- Move bootstrap.js to the bottom so that it will override other js files.

    2:- Make sure the order is like below

    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
    0 讨论(0)
  • 花落未央
    2020-11-22 07:37

    Try This

    myModal1 is the id of modal

    $('#myModal1').modal({ show: true });
    0 讨论(0)
 看不清?
提交回复
热议问题