Pregunta ¿Cómo abrir una ventana modal de Bootstrap usando jQuery?


Estoy usando la funcionalidad de la ventana modal de Twitter Bootstrap. Cuando alguien hace clic en enviar en mi formulario, quiero mostrar la ventana modal al hacer clic en el botón "enviar" en el formulario.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizzard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});

547
2017-11-01 18:52


origen


Respuestas:


Bootstrap tiene algunas funciones que se pueden llamar manualmente en modales:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Puedes ver más aquí: Componente modal Bootstrap

Específicamente el sección de métodos.

Entonces necesitarías cambiar:

$('#my-modal').modal({
    show: 'false'
}); 

a:

$('#myModal').modal('show'); 

Si está buscando crear una ventana emergente personalizada, aquí hay un video sugerido de otro miembro de la comunidad:

https://www.youtube.com/watch?v=zK4nXa84Km4


1007
2017-11-01 18:57



Además, puede usar el atributo de datos

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

En este caso particular, no necesita usar javascript.

Puedes ver más aquí: http://getbootstrap.com/2.3.2/javascript.html#modals


66
2017-08-28 17:11



Muy a menudo, cuando $('#myModal').modal('show'); no funciona, es causado por haber incluido jQuery dos veces. La inclusión de jQuery 2 veces hace que los modales no funcionen.

Elimina uno de los enlaces para que funcione nuevamente.

Además, algunos plugins también causan errores, en este caso agrega

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

49
2018-01-19 07:24



Simplemente llame al método modal (sin pasar ningún parámetro) usando jQuery selector.

Aquí hay un ejemplo:

$('#modal').modal();

12
2018-02-06 19:21



Si usa la función onclick de los enlaces para llamar a un modal mediante jQuery, el "href" no puede ser nulo.

Por ejemplo:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

El Modal no puede mostrar. El código correcto es:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>

9
2018-04-18 06:42



Vea la solución completa aquí:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Asegúrese de colocar las bibliotecas en el orden requerido para obtener el resultado:

1- Primero bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(En otras palabras, jquery.min.js debe llamarse antes de bootstrap.min.js)

    <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.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

8
2018-01-14 21:16



Probé varios métodos que fallaron, pero el siguiente me funcionó como un encanto:

$('#myModal').appendTo("body").modal('show');

5
2018-06-08 03:33



A continuación, se indica cómo cargar la alerta de arranque tan pronto como el documento esté listo. Es muy fácil solo agregar

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

Hice una manifestación en 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>


5
2017-08-26 13:57



<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizzard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Puede iniciar el modal con el siguiente código.

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

1
2017-10-12 10:44