Jestem bardzo noobem, więc myślę, że nadzoruję coś (prawdopodobnie oczywistego) z modalem bootstrap na Twitterze. To, co próbuję zrobić, to uzyskać modal do uruchamiania tylko na urządzeniach mobilnych. Działa to dobrze z dodaniem klasy .visible-phone do modalnego div. Na razie w porządku. Ale chcę, żeby to zadziałało, co oznacza, że możesz je zamknąć przyciskiem X. I nie mogę uruchomić przycisku.
<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>
Na dole HTML umieściłem jquery.js (pierwszy) i bootstrap.modal.js i bootstrap.transition.js. Właściwie wszystkie moduły bootstrap js (aby nie przegapić dołączenia). Nie mam doświadczenia z js ..
Proszę wybacz mi, jeśli pozowałem naprawdę głupie pytanie. Nie mogłem znaleźć odpowiedzi na tę konkretną sytuację w dzienniku.
źródło
$('#myModal').modal('show')
działa na mnie, ale hide nie.$('#myModal').modal('toggle');
zamiast tegoMiałem problemy z zamknięciem modalnego okna dialogowego bootstrap, jeśli zostało otwarte za pomocą:
$('#myModal').modal('show');
Rozwiązałem ten problem, otwierając okno dialogowe za pomocą następującego linku:
<a href="#myModal" data-toggle="modal">Open my dialog</a>
Nie zapomnij o inicjalizacji:
$('#myModal').modal({show: false});
Użyłem również następujących atrybutów dla przycisku zamykającego:
data-dismiss="modal" data-target="#myModal"
źródło
Dodaj klasę hide do modalu
<!-- Modal Demo --> <div class="modal hide" id ="myModal" aria-hidden="true" >
Kod 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>
źródło
.modal ('hide') ręcznie ukrywa modal. Użyj poniższego kodu, aby zamknąć model bootstrap
$('#myModal').modal('hide');
Spójrz na działające codepen tutaj
Lub
Spróbuj tutaj
Pokaż fragment kodu
$(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">×</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 -->
źródło
Spróbuj dokładnie określić modal, który powinien zamknąć przycisk z celem danych. Twój przycisk powinien więc wyglądać następująco -
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
Ponadto, powinieneś potrzebować tylko bootstrap.modal.js, abyś mógł bezpiecznie usunąć pozostałe.
Edycja: jeśli to nie zadziała, usuń klasę visible-phone i przetestuj ją w przeglądarce na komputerze zamiast w telefonie. To pokaże, czy otrzymujesz błędy javascript, czy na przykład jest to problem ze zgodnością.
Edycja: kod demonstracyjny
<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>
źródło
code
<div class = "modal visible-phone" id = "myModal"> <div class = "modal-header"> <button class = "close" data-dismiss = "modal" data-target = "# myModal"> × </button> <h3> tekst wprowadzający <br> chcę przejść do ... </h3> </div> <div class = "modal-body"> <ul class = "nav"> <li> .. . lista linków tutaj </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>code
<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>
Zgodnie z dokumentacją hide / toggle powinno działać. Ale tak nie jest.
Oto jak to zrobiłem
$('#modal-id').modal('toggle'); //Hide the modal dialog $('.modal-backdrop').remove(); //Hide the backdrop $("body").removeClass( "modal-open" ); //Put scroll back on the Body
źródło
$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });
Spróbuj tego ...
$('body').removeClass('modal-open'); $('.modal-backdrop').remove();
źródło
Miałem ten sam problem na iPhonie lub komputerze stacjonarnym, nie udało mi się zamknąć okna dialogowego po naciśnięciu przycisku zamykania.
Dowiedziałem się, że
<button>
tag definiuje przycisk, który można kliknąć i jest potrzebny do określenia atrybutu typu elementu w następujący sposób:<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
sprawdź przykładowy kod modali bootstrap na: BootStrap javascript Page
źródło
Jeśli masz jednocześnie wyświetlanych kilka modalnych, możesz określić docelowy modalny przycisk modalny z atrybutami
data-toggle
idata-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>
Gdzieś poza kodem modalnym możesz mieć inny przycisk przełączania:
<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>
Użytkownik nie może kliknąć przycisku przełączania modalnego, gdy ten przycisk jest ukryty i działa poprawnie z opcją
"modal"
atrybutudata-toggle
. Ten schemat działa automagicznie!źródło
Oto fragment kodu nie tylko do zamykania modali bez odświeżania strony, ale po naciśnięciu klawisza Enter wysyła modalne i zamyka bez odświeżania
Mam to skonfigurowane na mojej stronie, gdzie mogę mieć wiele modali, a niektóre modały przetwarzają dane podczas przesyłania, a niektóre nie. Tworzę unikalny identyfikator dla każdego modalu, który przetwarza. Na przykład na mojej stronie internetowej:
HTML (stopka modalna):
<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; } }); });
Jak widać, to przesyłanie wykonuje przetwarzanie, dlatego mam ten jQuery dla tego modalu. Teraz powiedzmy, że mam inny modal na tej stronie, ale żadne przetwarzanie nie jest wykonywane, a ponieważ jeden modal jest otwarty w czasie, umieszczam inny
$(document).ready()
w globalnym skrypcie php / js, który otrzymują wszystkie strony, i daję przyciskowi zamykania modalu klasę o nazwie:".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 (w tym 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'); } } }); });
źródło