Jak zamknąć modal bootstrap na Twitterze (po pierwszym uruchomieniu)

91

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.

Monique De Haas
źródło

Odpowiedzi:

219

$('#myModal').modal('hide') powinien to zrobić

ayal gelles
źródło
tak, to działa. Ale nie mam tej samej animacji, którą mamy przy użyciu 'data-dismiss = "modal"'?
Chris,
ok, mój błąd. Właściwie nie pamiętam problemu, który miałem wtedy, teraz używam tego i działa idealnie. TY!
Chris
Dowiedz się więcej tutaj .. stackoverflow.com/questions/10944302/…
Sanjay Kumar.
6
To dziwne, $('#myModal').modal('show')działa na mnie, ale hide nie.
Charlotte
3
@LittleBigBot spróbuj użyć $('#myModal').modal('toggle');zamiast tego
Edson Horacio Junior
27

Miał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"
artkoenig
źródło
Cześć artjom. Dzięki! Uruchomi go i przekaże opinię. Nie używasz przycisku à do otwierania okna modalnego? Ponieważ właśnie to próbuję osiągnąć. Miej uruchomienie modalne na początku i tylko na urządzeniach mobilnych, aby zaoferować menu szybkiej nawigacji do lokalizacji (nie ma znaczenia bezpośrednio na komputerze), taki jest pomysł.
Monique De Haas
Tak data-dismiss = "modal" data-target = "# myModal" rozwiązała mój problem! doceniam!
Dheeraj Thedijje
13

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>
shaunak1111
źródło
13

.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

Subodh Ghulaxe
źródło
6

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>
Simon Cunningham
źródło
Cześć @Simon Cunningham Tnx milion za odpowiedź! Umieściłem cel danych. Nie zadziałało (niestety) Następnie usunąłem klasę z widocznym telefonem. Nie zrobiło to różnicy. 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>
Monique De Haas
Przepraszam za bałagan tekstowy;) Postępowałem zgodnie z twoją radą. Wydaje się logiczne, aby nadać przyciskowi zamknięcia dokładny cel danych. Ale jakoś wciąż nie udaje mi się to. Nawet jeśli wyłączasz widoczny telefon. Wydaje się, że nie wpływa na przycisk zamykania. (co jest dość dobrą rzeczą)
Monique De Haas
Jak początkowo otwierasz swój modal? Spróbuj otworzyć jak poniżej - <a data-toggle="modal" href="#myModal" class="btn"> Otwórz modal </a>
Simon Cunningham
Dodałem trochę skrócony kod demonstracyjny do mojej oryginalnej odpowiedzi. Pliki javascript i css są lokalne dla mojego projektu testowego, po prostu zastąp je linkami do własnego.
Simon Cunningham
6

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
user706001
źródło
1
Właściwie jest to poprawna odpowiedź „brutalnej siły”… ale sugeruję przepisanie jej, aby animacja była poprawna:$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });
DerDu
3

Spróbuj tego ...

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

$('.modal-backdrop').remove();
Theek
źródło
1

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

Isma
źródło
0

Jeśli masz jednocześnie wyświetlanych kilka modalnych, możesz określić docelowy modalny przycisk modalny z atrybutami data-togglei 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>

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"atrybutu data-toggle. Ten schemat działa automagicznie!

Blaster dźwięku
źródło
0

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&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;
      }
    });
});

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');
                    }
                }
         });
    });
yardpenalty.com
źródło