twitter bootstrap - example - Cómo cerrar el modo de arranque de twitter(después del lanzamiento inicial)

modal html (10)

Soy muy novato, así que creo que estoy supervisando algo (probablemente obvio) con twitter bootstrap modal. Lo que intento hacer es obtener un modal para que se inicie solo en dispositivos móviles. Esto funciona bien con la adición de 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 (first) y bootstrap.modal.js y bootstrap.transition.js. En realidad, todos los módulos bootstrap js (para no perderse un include). No tengo experiencia con js ..

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

Agregue la clase ocultar al modal

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

Código Javascript

 <script> $(function(){ $(''#closeModal'').click(function(){ $(''#myModal'').modal(''hide''); }); }); </script>  <script> $(function () { $(''#myModal'').modal(''show''); }); </script>

De acuerdo con la documentación, hide / toggle 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

Intente especificar exactamente el modal que el botón debería 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ías necesitar bootstrap.modal.js para poder eliminar los otros con seguridad.

Editar: si esto no funciona, elimine la clase de teléfono visible y pruébela en el navegador de su PC en lugar de en el teléfono. Esto mostrará si obtiene errores de javascript o si es 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>

Prueba esto ...

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

Si tiene pocos modos modales mostrados simultáneamente, puede especificar el objetivo modal para el botón en modo modal con atributos data-toggle y 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 alternar:

<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 alternar modal mientras este botón está oculto y funciona correctamente con la opción "modal" para el atributo data-toggle . ¡Este esquema funciona de manera automática!

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 etiqueta <button> define un botón que se puede hacer clic y se necesita 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 de modales bootstrap en: BootStrap javascript Page

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

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

Resolví este problema abriendo el diálogo en el siguiente enlace:

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

No olvides 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"

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

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

Echa un vistazo al códec de trabajo aquí

Intenta aquí

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

$(''#myModal'').modal(''hide'') debería hacerlo

Aquí hay un fragmento para no solo cerrar los modales sin la actualización de la página, sino que al presionar Enter se 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 en el envío y otros no. Lo que hago es crear una ID única para cada modal que hace el procesamiento. 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  <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  <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 y es por eso 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 dado que un modal está abierto a la vez, puse otro $(document).ready() en un script php / js global que todas las páginas obtienen y doy el botón de cierre 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''); } } }); });