Zamknij Mod Bootstrap

432

Mam modalne okno dialogowe ładowania początkowego, które chcę wyświetlić na początku, a następnie, gdy użytkownik kliknie stronę, znika. Mam następujące:

$(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>

Modal jest wyświetlany początkowo, ale nie zamyka się po kliknięciu poza modalem. Ponadto obszar zawartości nie jest wyszarzony. Jak mogę ustawić moduł, aby wyświetlał się początkowo, a następnie zamykał, gdy użytkownik kliknie poza obszarem? Jak mogę wyszarzyć tło, tak jak w wersji demo?

Nick B.
źródło
Czy inicjujesz swój modal przy pomocy $("#yourModal").modal()lub $('.modal').modal()?
merv
Dodano więcej kontekstu powyżej. Dzięki za wszelkie pomysły @merv!
Nick B
tak ... to pokazało problem. @Tamil ma twoje rozwiązanie.
merv

Odpowiedzi:

706

Umieść modal('toggle')zamiastmodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
Tamil Selvan C.
źródło
5
W ogóle włączenie „przełączania” jest zbędne. Tylko upewnij się, że nie ma klasy „ukryj” na div modalnej. Ale tak, literówka była przyczyną problemu. więc +1
merv
22
nie, to nie działa zgodnie z przeznaczeniem, ukrywa element modalny, ale element nakładki w tle nadal istnieje, powinieneś użyć rozwiązania @Subodth.
Parik Tiwari
1
@Pierre - rozważ usunięcie swojego komentarza, .modal (). Hide () nie jest tym samym, co .modal ('hide'), będziesz wprowadzać ludzi w błąd.
Michael Peterson
2
Jak powiedział Parik, poprawną odpowiedzią jest użycie modalu („ukryj”)
MidouCloud,
To NIE jest poprawna odpowiedź, sprawdź odpowiedź poniżej!
user1467439
412

aby zamknąć modal bootstrap , możesz przekazać „ukryj” jako opcję metody modalnej w następujący sposób

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

Proszę spojrzeć na działające skrzypce tutaj

bootstrap zapewnia również zdarzenia, które można podłączyć do funkcjonalności modalnej , np. jeśli chcesz uruchomić zdarzenie, gdy modal jest już ukryty przed użytkownikiem, możesz użyć hidden.bs.modal zdarzenia możesz przeczytać więcej o metodach modalnych i zdarzeniach tutaj w Dokumentacja

Jeśli żadna z powyższych metod nie działa, podaj identyfikator swojemu przyciskowi zamykania i wciśnij przycisk zamykania.

Subodh Ghulaxe
źródło
4
$ ('# modal'). modal ('toggle'); lepiej ukryć modalny cień
hamzeh.hanandeh
5
@ hamzeh.hanandeh, togglezachowuje nakładkę i nie jest rozwiązaniem. Zawsze należy użyć jednej showlub hide.
ryanpcmcquen
81
$('#modal').modal('toggle'); 

lub

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

powinno działać.

Ale jeśli nic więcej nie działa, możesz bezpośrednio wywołać modalny przycisk zamknięcia:

$("#modal .close").click()
Robert Benyi
źródło
10
ten z hide () zamyka modal, ale pozostawia tło rozmazane. $ („# modal .close”). click () robi to doskonale. Dziękuję Ci!
Shilpa,
4
Jest to już wyraźnie udokumentowane, tutaj nie ma potrzeby fałszywego kliknięcia, które wydaje się dość szalone. Prawidłowa odpowiedź to: $ ('# modal'). Modal ('hide');
Michael Peterson
this -> $ ('# modal'). modal (). hide ();
TARA
Mam model, który się nie zamyka, $('#modal').modal('hide')ale mogę go zamknąć za pomocą, $('#modal').modal('toggle')ale po zamknięciu wyświetla pionowy pasek przewijania. Więc dla mnie $('#modal').hide()działało idealnie, ale chcę wiedzieć, czy to stworzy jakieś problemy? I koduję w środku, $('#modal .close').click()więc nie sądzę, żebym mógł użyć go do zamknięcia modalu.
Ahtisham
34

to działało dla mnie:

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

użyj tego linku modal close

Santhosh
źródło
20
$("#your-modal-id").modal('hide');

Uruchomienie tego połączenia za pośrednictwem klasy ($(".my-modal"))nie będzie działać.

Yishai Landau
źródło
18

Spróbuj tego

$('#modal_id').modal('hide');
Uwielbiam Kumar
źródło
3
Myślę, że to stanowi odpowiedź na pytanie.
jkdev
1
Zgadzam się. Ta odpowiedź jest bardziej trafna w stosunku do pytania.
mikeyq6,
1
To lepsza odpowiedź niż najbardziej entuzjastyczna.
Marcelo Agimóvel,
@ MarceloAgimóvel :-)
Love Kumar
10

ten jest całkiem dobry i działa również w kanciastym 2

$("#modal .close").click()
użytkownik3869304
źródło
Działa dla mnie zamiast tego $('#modal').modal('toggle');nie ma żadnego efektu.
Todor Todorov
8

Moim pięcioma centami na tym jest to, że nie chcę celować w modal bootstrap z identyfikatorem i widząc, że powinien być tylko jeden mod na raz, poniższe powinny być wystarczające do usunięcia modalu, ponieważ przełączanie może być niebezpieczne :

$('.modal').removeClass('show');
Andre Van Zuydam
źródło
2
Intencje są dobre, ale to podejście nie zawsze działa. Inne elementy strony, w tym <body>, mają dodane klasy, które również musiałyby zostać przywrócone. Najlepszą odpowiedzią jest użycie 'hide'metody.
JustinStolle
7

W niektórych okolicznościach winowajcą może być błąd pisania. Na przykład upewnij się, że masz:

data-dismiss="modal"

i nie

data-dissmiss="modal"

Zwróć uwagę na podwójne „ss” w drugim przykładzie, które spowoduje błąd przycisku Zamknij.

zinczinc
źródło
6

Możemy zamknąć modalne okienko wyskakujące na następujące sposoby:

// 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.
Sheo Dayal Singh
źródło
6

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

użyj powyższego kodu, aby ukryć tło modalne, jeśli używasz wielu modalnych popów na jednej stronie.

Sher Bahadur
źródło
Albo tylko $('.modal').modal('hide');zrobi.
Matt Roy
6

<!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>

Ganesh Putta
źródło
Błąd: „wiadomość”: „
Nieprzechwycony typ
Tak. Mam błąd, jeśli „Uruchom fragment kodu” w Chrome (Linux Mint). Ale działa w przeglądarce Firefox.
Ivan Burlutskiy,
1
@Ivan Burlutskiy, dziękuję za poinformowanie mnie, że jest to problem z włączeniem jquery, więc naprawiłem to. teraz działa dobrze we wszystkich przeglądarkach.
Ganesh Putta,
5
   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);
               }
           }
       });
   };
Sheladiya Ajay
źródło
Cześć - dzięki za odpowiedź. Sformatowałem to jako kod (co było dość proste - wystarczy wciąć nieco więcej pierwszego wiersza). Jednak zgaduję, że tylko to $('#DeleteModal').modal('hide');jest istotne tutaj?
Rup
4

możesz użyć;

$('#' + $('.modal.show').attr('id')).modal('hide');
Fatih Turan
źródło
3

Użycie modal.hide ukryłoby tylko modal. Jeśli używasz nakładki pod modułem, nadal tam będzie. użyj połączenia kliknięcia, aby faktycznie zamknąć modal i usunąć nakładkę.

$("#modalID .close").click()
Vikalp Veer
źródło
3

Innym sposobem na to jest to, że najpierw usuwasz klasę modal-open, która zamyka modal. Następnie usuwasz klasyczne tło modalne, które usuwa szarawą pokrywę modalu.

Można użyć następującego kodu:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  
Orozcorp
źródło
Staraj się unikać po prostu odrzucania kodu jako odpowiedzi i spróbuj wyjaśnić, co robi i dlaczego. Twój kod może nie być oczywisty dla osób, które nie mają odpowiedniego doświadczenia w programowaniu. Edytuj swoją odpowiedź, aby uwzględnić wyjaśnienie, kontekst i spróbuj wspomnieć o wszelkich ograniczeniach, założeniach lub uproszczeniach w swojej odpowiedzi.
Frits
OK, więc w zasadzie to usuwa klasę modal-open, która zamyka modal. następnie usuwa klasyczne tło modalne, które usuwa szarawą pokrywę modalu
Orozcorp
3

Za pomocą tej sztuczki zamknąłem programowo programowo

Dodaj przycisk w trybie modalnym data-dismiss="modal"i ukryj przycisk za pomocą display: none. Oto jak to będzie wyglądać

<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>

Teraz, gdy chcesz zamknąć modalnie Programowo, po prostu uruchom zdarzenie kliknięcia na tym przycisku, które nie jest widoczne dla użytkownika

W Javascript możesz wywołać kliknięcie tego przycisku w następujący sposób:

document.getElementById('close-modal').click();
Zohab Ali
źródło
2

Ten kod działał idealnie dla mnie, aby zamknąć modal (używam bootstrap 3.3)

$('#myModal').removeClass('in')
użytkownik3870075
źródło
2

W moim przypadku strona główna, z której uruchomiono modalne bootstrap, zaczęła nie odpowiadać po użyciu $("#modal").modal('toggle');, ale zaczęła odpowiadać w następujący sposób:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
Awais Nasir
źródło
2

To działa dobrze

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

Jednakże, gdy masz wiele modów układanych jeden na drugim, nie jest to skuteczne, więc zamiast tego działa

data-dismiss="modal"
Edgar256
źródło
2

Po pewnym teście stwierdziłem, że na modal bootstrap trzeba poczekać jakiś czas przed wykonaniem $(.modal).modal('hide')po wykonaniu $(.modal).modal('show'). I stwierdziłem, że w moim przypadku potrzebuję co najmniej 500 milisekund przerwy między nimi.
Oto mój przypadek testowy i rozwiązanie:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);
ibrahim saputra
źródło
to rozwiązuje problemy, które miałem z tym, że modal się nie zamyka, gdy otwieram kolejny, dzięki
hal9000
2

Możesz zobaczyć to odniesienie ale jeśli ten link został usunięty, przeczytaj ten opis:

Wywołaj modal o identyfikatorze myModal z jednym wierszem JavaScript:

$('#myModal').modal(options)

Opcje

Opcje można przekazać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data- , jak w data-backdrop = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Metody

Metody i przejścia asynchroniczne

Wszystkie metody API są asynchroniczne i rozpoczynają przejście. Wracają do dzwoniącego zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem. Ponadto wywołanie metody dla komponentu przejściowego zostanie zignorowane.

Więcej informacji znajduje się w naszej dokumentacji JavaScript.

.modal (opcje)

Aktywuje twoją treść jako modal. Akceptuje opcjonalny obiekt opcji.

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

.modal („przełącznik”)

Ręcznie przełącza modal. Powraca do programu wywołującego, zanim modal zostanie faktycznie pokazany lub ukryty (tj. Przed wystąpieniem zdarzenia pokazanego.bs.modal lub hidden.bs.modal).

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

.modal („pokaż”)

Ręcznie otwiera modal. Powraca do programu wywołującego przed faktycznym wyświetleniem modalu (tj. Przed wystąpieniem zdarzenia pokazanego.bs.modal).

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

.modal („ukryj”)

Ręcznie ukrywa modal. Powraca do programu wywołującego przed faktycznym ukryciem modalu (tj. Przed wystąpieniem zdarzenia hidden.bs.modal).

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

.modal („handleUpdate”)

Ręcznie wyreguluj pozycję modalu, jeśli wysokość modalu zmienia się, gdy jest on otwarty (tj. W przypadku pojawienia się paska przewijania).

$('#myModal').modal('handleUpdate')

.modal („usuń”)

Niszczy modal elementu.

Wydarzenia

Klasa modalna Bootstrap ujawnia kilka zdarzeń umożliwiających podłączenie do funkcjonalności modalnej. Wszystkie zdarzenia modalne są uruchamiane w samym module (tj. W **). Typ Opis

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})
mirzaei.sajad
źródło
0

Poza tym możesz „kliknąć” na „x”, który zamyka okno dialogowe. Na przykład:

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

slashka
źródło
0

W moim przypadku użyłem przycisku, aby pokazać modal

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Więc w moim kodzie, aby zamknąć modal (który ma id = 'my-modal-to-show'), wywołuję tę funkcję (w maszynopisie Angular):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Jeśli wywołam $ (modalId) .modal ('hide'), to nie zadziała i nie wiem dlaczego

PS .: w moim modale kodowałem ten element przycisku również klasą .close

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>
Anderson Dourado Cunha
źródło
0

czasami rozwiązanie nie działa, więc trzeba poprawnie usunąć klasę i dodać ekran css: brak ręcznie.

$("#modal").removeClass("in");
$("#modal").css("display","none");
عبد الرحمان بويشو
źródło