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

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

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


当前回答

你可以试试这个

div tabindex="-1"

在你的HTML和jquery你可以使用

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

OR

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

其他回答

$("#your-modal-id").modal('hide');

通过类($(".my-modal"))运行这个调用将不起作用。

在某些情况下,打字错误可能是罪魁祸首。例如,确保你有:

data-dismiss="modal"

而不是

data-dissmiss="modal"

注意第二个例子中的两个“ss”,它将导致关闭按钮失败。

这个非常好,它也适用于angular 2

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

此外,你可以“点击”一个“x”,关闭对话框。 例如:

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

另一种方法是首先删除类modal-open,这样就关闭了模态。然后您删除类modal- background,它删除了模态的灰色封面。

可以使用以下代码:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()