Cómo hacer que Twitter Bootstrap modal se cierre (después del lanzamiento inicial)

Soy un novato, así que creo que estoy supervisando algo (probablemente obvio) con el modo de arranque de Twitter. Lo que estoy tratando de hacer es conseguir que un modal se lance solo en dispositivos móviles. Esto funciona bien agregando la clase .visible-phone en el div modal. Hasta aquí todo bien. Pero luego quiero que funcione, lo que significa que puedes cerrarlo con el botón X. Y no puedo hacer que el botón funcione.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

En la parte inferior del html puse jquery.js (primero) y bootstrap.modal.js y bootstrap.transition.js. En realidad, todos los módulos de bootstrap js (para no perderse una inclusión). No tengo experiencia con js ..

Por favor, perdóneme si planteé una pregunta realmente estúpida. No pude encontrar la respuesta a esta situación específica en el registro.

$('#myModal').modal('hide') Deberías hacerlo

Tuve problemas para cerrar el cuadro de diálogo modal de arranque, si se abrió con:

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

Resolví este problema abriendo el cuadro de diálogo mediante el siguiente enlace:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

No olvide la inicialización:

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

También utilicé los siguientes atributos para el botón de cierre:

data-dismiss="modal" data-target="#myModal"

Agrega la clase hide al modal

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

Código Javascript

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

.modal ('ocultar') oculta manualmente un modal. Use el siguiente código para cerrar su modelo de arranque

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

Eche un vistazo al código de trabajo aquí

O

Intenta aquí

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Intente especificar exactamente el modal que el botón debe cerrar con data-target. Entonces, su botón debería verse como el siguiente:

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

Además, solo debería necesitar bootstrap.modal.js para poder eliminar de forma segura los demás.

Editar: si esto no funciona, elimine la clase de teléfono visible y pruébela en el navegador de su PC en lugar del teléfono. Esto mostrará si está recibiendo errores de JavaScript o si se trata de un problema de compatibilidad, por ejemplo.

Editar: código de demostración

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Según la documentación, ocultar / alternar debería funcionar. Pero no es así.

Así es como lo hice

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

Pruébate esto ...

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

Tuve el mismo problema en el iphone o en el escritorio, no logré cerrar el diálogo al presionar el botón de cerrar.

Descubrí que la <button>etiqueta define un botón en el que se puede hacer clic y es necesaria para especificar el atributo de tipo para un elemento de la siguiente manera:

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

verifique el código de ejemplo para los modales de arranque en: Página de JavaScript de BootStrap

Si tiene pocos modales mostrados simultáneamente, puede especificar el modo de destino para el botón in-modal con atributos data-toggley data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

En algún lugar fuera del código modal, puede tener otro botón de alternancia:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

El usuario no puede hacer clic en el botón de alternancia in-modal mientras este botón está oculto y funciona correctamente con la opción "modal"de atributo data-toggle. ¡Este esquema funciona de forma automática!

Aquí hay un fragmento no solo para cerrar modales sin actualizar la página, sino que al presionar enter, envía modal y se cierra sin actualizar

Lo tengo configurado en mi sitio donde puedo tener múltiples modales y algunos modales procesan datos al enviar y otros no. Lo que hago es crear una identificación única para cada modal que procesa. Por ejemplo en mi página web:

HTML (pie de página modal):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

Como puede ver, este envío realiza el procesamiento, por lo que tengo este jQuery para este modal. Ahora digamos que tengo otro modal dentro de esta página web pero no se realiza ningún procesamiento y como un modal está abierto a la vez, pongo otro $(document).ready()en un script php / js global que obtienen todas las páginas y le doy al botón de cierre del modal una clase llamada ".modal-close"::

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (incluye global.inc):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });