jquery - tamaño - modal form

Cerrar Bootstrap Modal

Question

Tengo un cuadro de diálogo modal de arranque que quiero mostrar inicialmente, luego cuando el usuario hace clic en la página, desaparece. Tengo los siguientes

$(function () {
   $(''#modal'').modal(toggle)
});

 <div class="modal" id=''modal''>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

El modal se muestra inicialmente, pero no se cierra cuando se hace clic fuera del modal. Además, el área de contenido no está atenuada ... ¿Cómo puedo hacer que el modo se muestre inicialmente y luego cierre después de que el usuario haga clic fuera del área? ¿Y cómo puedo hacer que el fondo aparezca en gris como en la demostración?

Answer 1

Cerré modal programáticamente con este truco.

Agregue un botón en modal con data-dismiss="modal" y oculte el botón con display: none . Así es como se verá

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Ahora, cuando desee cerrar el modo modal, simplemente active un evento de clic en ese botón, que no es visible para el usuario

En Javascript puedes disparar haciendo click en ese botón así:

document.getElementById(''close-modal'').click();

Answer 2

Además, puede "hacer clic" en una ''x'', que cierra el diálogo. P.ej:

$(".ui-dialog-titlebar-close").click();

Answer 3

En algunas circunstancias, el error tipográfico podría ser el culpable. Por ejemplo, asegúrese de tener:

data-dismiss="modal"

y no

data-dissmiss="modal"

Observe la doble "ss" en el segundo ejemplo que hará que el botón Cerrar falle.

Answer 4

En mi caso, la página principal desde donde se activó bootstrap modal comenzó a no responder después de usar $("#modal").modal(''toggle''); manera, pero comenzó a responder de la siguiente manera:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Answer 5

Este código funcionó perfectamente para que yo cerrara un modal (estoy usando bootstrap 3.3)

$(''#myModal'').removeClass(''in'')

Answer 6

Este es bastante bueno y también funciona en angular 2.

$("#modal .close").click()

Answer 7

Mis cinco centavos en este caso es que no quiero tener que apuntar al modal de arranque con una identificación y, como debería haber solo un modal a la vez, lo siguiente debería ser suficiente para eliminar el modal, ya que la alternancia podría ser peligrosa :

$(''.modal'').removeClass(''show'');

Answer 8

Otra forma de hacer esto es que primero elimine la clase modal-open, que cierra el modal. Luego eliminas la clase modal-background que elimina la cubierta grisácea de la modal.

Se puede utilizar el siguiente código:

$(''body'').removeClass(''modal-open'')
$(''.modal-backdrop'').remove()  

Answer 9

Poner modal(''toggle'') lugar de modal(toggle)

$(function () {
   $(''#modal'').modal(''toggle'');
});

Answer 10

Usar modal.hide solo escondería el modal. Si está utilizando superposición debajo del modal, todavía estaría allí. use click call para cerrar realmente el modal y eliminar la superposición.

$("#modalID .close").click()

Answer 11

esto funcionó para mí:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

usa este enlace modal cerca

Answer 12

para cerrar el modo de arranque, puede pasar ''ocultar'' como opción al método modal de la siguiente manera

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

Por favor, eche un vistazo a violín de trabajo aquí

bootstrap también proporciona eventos que puede enganchar a modal funcionalidad modal , como si desea activar un evento cuando el modal haya terminado de ocultarse al usuario, puede usar el evento hidden.bs.modal , puede leer más sobre los métodos y eventos modales aquí en modal

Si ninguno de los métodos anteriores funciona, asigne una identificación a su botón de cierre y haga clic en el botón de cerrar.

Answer 13

puedes usar;

$(''#'' + $(''.modal.show'').attr(''id'')).modal(''hide'');

Answer 14

$(''.modal.in'').modal(''hide'');

use el código anterior para ocultar el fondo de modal si está usando un pop múltiple en una página.

Answer 15

Podemos cerrar la ventana emergente modal de las siguientes maneras:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class=''modal-footer''><button type=''button'' class="btn btn-default" data-dismiss=''modal''>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class=''modal fade pageModal''  id=''openModal'' tabindex=''-1'' data-keyboard=''false'' data-backdrop=''static''>

    $(''#openModal'').modal(''hide''); //Using modal pop-up Id.
    $(''.pageModal'').modal(''hide''); //Using class that is defined in modal html.

Answer 16

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $(''#myModal'').modal(''show'');
});
$(function () {
   $(''#modal'').modal(''toggle'');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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>

</body>
</html>

Answer 17

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:''" + id + "''}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $(''#DeleteModal'').modal(''hide'');},1000);
               }
           }
       });
   };

Answer 18

$("#your-modal-id").modal(''hide'');

La ejecución de esta llamada a través de la clase ($(".my-modal")) no funcionará.

Answer 19

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

o

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

Deberia trabajar.

Pero si nada más funciona, puede llamar directamente al botón de cierre modal:

$("#modal .close").click()