Estoy tratando de que aparezca un cuadro de diálogo cuando se hace clic en un botón, pero no sucede nada. Aquí está el html:

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

Que crea un botón que se ve así: ingrese la descripción de la imagen aquí

Pero cuando hago clic en él, no pasa nada. Sin errores, nada.

Aquí está el html para el cuadro de diálogo emergente que sigue inmediatamente después del anterior:

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

Aquí está el javascript que se supone debe manejar el clic y mostrar la ventana emergente:

$('#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')
})    

Aquí están las bibliotecas incluidas justo después de arriba:

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

También tengo esta versión de jQuery en la sección principal:

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

Si lo muevo justo por encima de los otros dos como dicen las instrucciones, se producen errores en otros objetos js que necesitan versiones diferentes. Aquí están los enlaces en la sección principal como referencia. Este es el único pedido que muestra la página sin 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" />  

Aquí hay una imagen que muestra parte de la página. Hay un par de otros componentes: uno para crear los divisores de diseño ajustables y otro para crear la tabla con anchos de columna ajustables. Ambos pueden usar la misma versión de jquery que no funciona para la ventana emergente.

enter image description here

Estoy siguiendo el ejemplo emergente en la sección llamada "Contenido modal variable".

Estoy pensando que el problema es que las otras versiones de jQuery están anulando la que necesita la ventana emergente, pero solo estoy adivinando. Ojalá alguno de ustedes, los expertos, pueda señalar mi error.

¿Cómo manejan las situaciones en las que tienen múltiples componentes en una página web que dependen de versiones específicas de jQuery que interfieren entre sí?

0
user3217883 29 sep. 2020 a las 06:16

3 respuestas

La mejor respuesta

Si no está haciendo nada funcional cuando se muestra el modal y solo necesita mostrar el modal al hacer clic en el botón.

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

Si quieres manejarlo en javascript

$('#AddSymbol').on('click', function(e){
    $('#exampleModal').modal('show')
})
1
divyajyotiuk 29 sep. 2020 a las 03:37

Espero que te ayude:

$('#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>
1
Mehrzad Tejareh 29 sep. 2020 a las 05:13

Esto es súper fácil con el modelo de Bootstrap Verifique el enlace de arriba, definitivamente puede obtener una solución desde allí

0
DWARKADHISH INDUSTRIES 29 sep. 2020 a las 03:36