如何在jQuery中弹出对话框？

Question

I'm trying to get a dialog to popup when a button is clicked but nothing is happening. Here is the html:

<button id = "AddSymbol" class="btn" data-toggle="modal" data-target="#exampleModal">
   <i class="glyphicon glyphicon-plus-sign"></i> Syms
</button>

which creates a button that looks like this:

But when I click it, nothing happens. No errors, nothing.

Here is the html for the popup dialog which follows immediately after the above:

<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">Add Symbol To Watchlist</h5>
          <button type="button" class="close" data-dismiss="modal">
             <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
           <form>
             <div class="form-group">
               <label for="symbol" class="col-form-label">Symbol</label>
               <input type="text" class="form-control" id="symbol"></input>
             </div>
           </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Add</button>
        </div>
      </div>
    </div>
</div>   

Here is the javascript that is supposed to handle the click and show the popup:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $('#AddSymbol') // Button that triggered the modal
    var modal = $(this)
    modal.find('.modal-title').text('Add Symbol To Watchlist')
})    

Here are the libraries included right after above:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>

I also have this version of jQuery in the head section:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>

If I move it to just above the other two like the instructions say, then errors occur from other js objects that need different versions. Here are the links in the head section for reference. This is the only order that shows the page without error:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Gridsplit Main Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Greg\Projects\JsonImporter\moneymachine\src\css\jquery.gridsplit.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./dist/jquery.gridsplit.optimised.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<link href="C:/Users/Greg/Projects/nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="C:/Users/Greg/Projects/nvd3/build/nv.d3.js"></script>
<link rel="stylesheet" type="text/css" href="C:\Users\Greg\Projects\JsonImporter\colResizable-1.6\samples\colResizable.Demo\css\main.css" />  

Here is a picture showing part of the page. There are a couple other components - one for creating the adjustable layout dividers and one for creating the table with adjustable column widths. They both can use the same version of jquery which doesn't work for the popup.

I'm following the popup example in the section called "Varying Modal Content".

I'm thinking the problem is that the other versions of jQuery are overriding the one that the popup needs, but I'm just guessing. Hopefully one of you experts can point out my error.

How do you guys handle situations where you have multiple components on a web page that depend on specific versions of jQuery that interfere with each other?

Answer 1

If you aren't doing anything functional when the modal is shown and you just need to show the modal on button click.

<button data-toggle="modal" data-target="#exampleModal">

If you want to handle it in javascript

$('#AddSymbol').on('click', function(e){
    $('#exampleModal').modal('show')
})

Answer 2

I hope its helps you:

 $('#AddSymbol').on('click', function(e){ $('#myModal').modal('show') })

 <!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/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Button to Open the Modal --> <button type="button" id="AddSymbol" class="btn btn-primary" > Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

Answer 3

使用 Bootstrap模型，这件事非常简单 检查上面的链接，您绝对可以从那里获得解决方案