封闭引导模态

我有一个引导模式对话框，我想首先显示，然后当用户在页面上单击时，它就消失了。我有以下几点:

$(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中添加这个

div tabindex="-1"

2020-07-07 11:39:34

其他回答

<!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>  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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>

2016-07-20 09:54:24

我的回答并不像上面的许多问题那样严格地与问题相关。但这些对话帮助我弄清楚为什么我的引导模式在我点击一个非常普通的关闭按钮时没有反应，而当我按下ESC按钮时它仍然关闭。

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

它可能会帮助某些人。

如果你在你的代码中(在某些特殊情况下它是有意义的):

$modal.off('click')

然后它还会导致模态不会关闭，因为事件被阻塞了。

在这种情况下，你必须自己处理:

$modal
  .on('click', '[data-dismiss="modal"]', function() {
      $modal.modal('hide');
  });

2021-12-17 15:55:28

用modal('toggle')代替modal(toggle)

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

2013-05-11 03:19:28

在我的情况下，主页从引导模式被触发开始不响应后使用$("#modal").modal('toggle');方式，但开始以以下方式回应:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

2018-03-29 10:16:06

这段代码完美地为我关闭一个模态(我使用bootstrap 3.3)

$('#myModal').removeClass('in')

2018-03-13 17:31:54

封闭引导模态

推荐文章

最新文章

标签