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

Question

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

Estoy usando la funcionalidad de ventana modal Bootstrap de Twitter. 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>

[2]} 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();
});

567

javascript jquery twitter-bootstrap

Author: Talha Awan, 2012-11-01

Source

10 answers

Además, puede usar via data attribute

<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

68

Author: Gandarez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-25 12:30:04

La mayoría de las veces, cuando $('#myModal').modal('show'); no funciona, es causado por haber incluido jQuery dos veces. Incluir jQuery 2 veces hace que los modales no funcionen.

Elimina uno de los enlaces para que funcione de nuevo.

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

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

53

Author: Peter verleg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-12 00:06:50

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

Aquí está el ejemplo:

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

13

Author: raBne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-06 19:21:24

Si utiliza la función onclick de links para llamar a un modal por jQuery, el "href" no puede ser null.

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 mostrarse. El código correcto es :

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

9

Author: saneryee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-18 06:42:04

Echa un vistazo a la solución completa aquí:

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

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

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

(En otras palabras, jquery.min.js debe ser llamada 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

Author: A.Aleem11,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-14 21:16:43

Aquí está cómo cargar la alerta de bootstrap tan pronto como el documento esté listo. Es muy fácil simplemente añadir

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

Hice una demostració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>

6

Author: csandreas1,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-26 14:05:10

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

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

5

Author: novembersky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-08 03:33:40

Intenta

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

Para abrir o cerrar el modal con id myModal.

Si lo anterior no funciona, entonces significa bootstrap.js ha sido anulado por algún otro archivo js. He aquí una solución

1: - Mover bootstrap.js a la parte inferior para que anule otros archivos js.

2: - Asegúrese de que el orden es como abajo

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>

2

Author: Nikhil Mohadikar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-07 11:55:26

<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 código debajo de este.

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

1

Author: Alperzkn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-12 10:44:15

score 1040 · Accepted Answer

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

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

Puedes ver más aquí: Componente modal Bootstrap

Específicamente la sección métodos.

Así que tendrías que cambiar:

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

A:

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

Si estás buscando hacer tu propia ventana emergente personalizada, aquí tienes un video sugerido de otro miembro de la comunidad:

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