Закрыть Bootstrap Modal

У меня есть модальное диалоговое окно начальной загрузки, которое я хочу показать изначально, а затем, когда пользователь нажимает на страницу, она исчезает. У меня есть следующее:



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


модальный отображается изначально, но он не закрывается при нажатии за пределами модального. Кроме того, область содержимого не выделена серым цветом.. Как я могу получить модальное отображение изначально, а затем закрыть после того, как пользователь нажимает за пределами области? И как я могу заставить фон быть серым, как в демо?

934   19  

19 ответов:

поставить modal('toggle') вместо modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
528  
2013-05-11 06:19:28

закрыть bootstrap модальные вы можете пройти 'hide' как вариант модального метода, как следовать

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

пожалуйста, взгляните на работу скрипку здесь

bootstrap также предоставляет события, которые вы можете подключить в модальные функциональность, например, если вы хотите запустить событие, когда модальное закончило быть скрытым от пользователя, вы можете использовать hidden.bs. modal событие, которое вы можете прочитать подробнее о модальных методах и событиях здесь в документация

Если ни один из вышеперечисленных методов не работает, дайте идентификатор вашей кнопки закрытия и нажмите кнопку закрытия.

322  
2015-10-25 08:01:42 
$('#modal').modal('toggle');

или 

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

должны работать.

но если ничего больше не работает, вы можете вызвать модальную кнопку закрытия напрямую:

$("#modal .close").click()
54  
2016-06-09 15:04:50

это сработало для меня:

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

по этой ссылке модальные закрыть

25  
2015-12-12 14:15:11 
$("#your-modal-id").modal('hide');

запуск этого вызова через класс ($(".my-modal")) не будет работать.

16  
2016-12-05 12:22:26

это очень хорошо и он также работает в угловые 2 

$("#modal .close").click()
9  
2017-03-01 07:58:56

мои пять центов на этом заключается в том, что я не хочу, чтобы иметь целью bootstrap модальный с идентификатором и видя, как там должно быть только один модальный в то время следующее должно быть вполне достаточно, чтобы удалить модальный как переключатель может быть опасным:

$('.modal').removeClass('show');
7  
2015-08-11 12:26:36

в некоторых случаях ошибка ввода может быть виновником. Например, убедитесь, что у вас есть:

data-dismiss="modal"

, а не 

data-dissmiss="modal"

обратите внимание на двойной "ss" во втором примере, который вызовет кнопку закрытия, которая не работает.

7  
2016-08-13 12:48:00

мы можем закрыть модальное всплывающее следующим образом:

// 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  
2017-06-05 11:19:04

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

используйте приведенный выше код, чтобы скрыть фон модального, если вы используете несколько модальных pop на одной странице.

4  
2017-08-18 17: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  
2017-12-11 09: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  
2018-07-09 14:18:19

используя модальные.скрыть бы только скрыть модальный. Если вы используете наложение под модальным, он все равно будет там. использовать кнопку вызова, чтобы фактически закрыть модальное и снимите накладку.

$("#modalID .close").click()
3  
2017-02-23 00:39:43

другой способ сделать это заключается в том, что сначала вы удаляете класс modal-open, который закрывает модальный. Затем вы удаляете класс modal-backdrop, который удаляет сероватую крышку модального.

можно использовать следующий код:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
2  
2017-08-17 11:35:48

в моем случае главная страница, с которой был запущен bootstrap modal, начала не отвечать после использования $("#modal").modal('toggle'); путь, но начал отвечать следующим образом:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
2  
2018-07-20 16:43:39

кроме того, вы можете "нажать" на 'x', который закрывает диалоговое окно. Например:

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

1  
2017-01-10 23:10:39

этот код отлично работал для меня, чтобы закрыть модальный (я использую bootstrap 3.3)

$('#myModal').removeClass('in')
1  
2018-03-13 19:31:54

вы можете использовать;

$('#' + $('.modal.show').attr('id')).modal('hide');
1  
2018-04-05 15:53:04

Я закрыл модальный программно с этим трюком

добавить кнопку в модальном с data-dismiss="modal" и скрыть кнопку с display: none. Вот как это будет выглядеть

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

теперь, когда вы хотите закрыть модальный программно просто триггер события click на этой кнопке, которая не видна пользователю

в JavaScript, вы можете вызвать нажмите на эту кнопку, Вот так:

document.getElementById('close-modal').click();
0  
2018-08-30 15:19:55

Comments

    Ничего не найдено.
Click here to cancel reply.