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

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

模态最初会显示,但在模态之外单击时不会关闭。此外,内容区域没有灰色。我怎么能得到模态显示最初,然后关闭后,用户点击区域外?我怎么能得到背景是灰色的演示?


当前回答

这很有效

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

然而,当你有多个情态动词堆叠在另一个上面时,它是无效的,所以,相反,这是有效的

data-dismiss="modal"

其他回答

这对我很有用。我是一个新手,所以,请忽略我的使用JQuery和香草JavaScript一起。

document.addEventListener("click",function(){
        $(".modal").modal('hide');
        });

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

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

关闭引导模式,你可以传递'hide'作为选项的模式方法,如下所示

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

请在这里看看工作小提琴

bootstrap也提供事件,你可以挂钩到模态功能,比如如果你想触发一个事件,当模态完成隐藏从用户,你可以使用hidden. b.s modal事件,你可以阅读更多关于模态方法和事件在这里的文档

如果以上方法都不起作用,给你的关闭按钮一个id,并触发点击关闭按钮。

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

使用模态。Hide只会隐藏模态。如果你在模态下面使用覆盖,它仍然会在那里。使用点击调用实际关闭模式,并删除覆盖。

$("#modalID .close").click()