Close Bootstrap Modal

Mam Bootstrap modalne okno dialogowe, które chcę pokazać początkowo, a następnie, gdy użytkownik kliknie na stronie, to 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 można uzyskać modal, aby wyświetlić początkowo, a następnie zamknąć po kliknięciu użytkownika poza obszarem? A jak Mogę sprawić, żeby tło było szare jak w demo?

Author: Arslan Ali, 2013-05-11
Source

19 answers

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

$(function () {
   $('#modal').modal('toggle');
});
 528
Author: Tamil Selvan C,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-11 03:19:28

Aby zamknąć bootstrap modal możesz przekazać 'Ukryj' jako opcję do metody modalnej jak następuje 

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

Proszę spojrzeć na pracę fiddle here

Bootstrap dostarcza również zdarzenia, które można zaczepić do funkcji modal, np. jeśli chcesz uruchomić zdarzenie, gdy modal został już ukryty przed użytkownikiem możesz użyć zdarzenia hidden.BS.modal więcej o metodach modalnych i zdarzeniach możesz przeczytać tutaj Dokumentacja

Jeśli żadna z powyższych metod nie działa, podaj identyfikator przycisku zamykania i uruchom przycisk zamykania.

 322
Author: Subodh Ghulaxe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-25 06:01:42 
$('#modal').modal('toggle');

Lub 

$('#modal').modal().hide();
Powinno zadziałać.

Ale jeśli nic innego nie działa, możesz wywołać przycisk modal close bezpośrednio: 

$("#modal .close").click()
 54
Author: Robert Benyi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-09 12:04:50

To mi pomogło: 

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

Użyj tego linku modal close

 25
Author: santhosh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-12 12:15:11 
$("#your-modal-id").modal('hide');

Uruchomienie tego wywołania przez klasę ($(".my-modal")) nie zadziała.

 16
Author: Yishai Landau,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-05 10:22:26

Ten jest całkiem dobry i działa również w angular 2 

$("#modal .close").click()
 9
Author: user3869304,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-01 05:58:56

Moje pięć centów na ten jeden jest to, że nie chcę mieć target modal bootstrap z id i widząc, jak powinno być tylko jeden modal na raz, następujące powinny być wystarczające, aby usunąć modal jak przełącznik może być niebezpieczne: {]} 

$('.modal').removeClass('show');
 7
Author: Andre Van Zuydam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-11 09:26:36

W pewnych 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 zamknięcia.

 7
Author: zinczinc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-13 09:48:00

Możemy zamknąć wyskakujące okienko modalne w następujący sposób: 

// 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.
 5
Author: Sheo Dayal Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-05 08:19:04

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

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

 4
Author: sher bahadur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-18 14:52:39 

<!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>
 4
Author: Ganesh Putta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-11 07:04:11 
   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);
               }
           }
       });
   };
 4
Author: Sheladiya Ajay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-09 11:18:19

Za pomocą modalu.hide ukryje tylko modal. Jeśli używasz nakładki pod modalem, nadal tam będzie. użyj click call, aby faktycznie zamknąć modal i usunąć nakładkę.

$("#modalID .close").click()
 3
Author: Vikalp Veer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-22 22:39:43

Innym sposobem jest usunięcie klasy modal-open, która zamyka modal. Następnie usuwa się klasę modal-tło, które usuwa szarą okładkę modalu.

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

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
 2
Author: Orozcorp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-17 08:35:48

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

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
 2
Author: Awais Nasir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-20 13:43:39

Poza tym możesz "kliknąć" na 'x', który zamyka okno dialogowe. Np.:

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

 1
Author: slashka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-10 21:10:39

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

$('#myModal').removeClass('in')
 1
Author: user3870075,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-13 17:31:54

Możesz użyć; 

$('#' + $('.modal.show').attr('id')).modal('hide');
 1
Author: Fatih Turan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-05 12:53:04

Zamknąłem modalny programowo tą sztuczką

Dodaj przycisk modalny za pomocą 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 programowo zamknąć modal, 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();
 0
Author: Zohab Ali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-30 12:19:55