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

$(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中添加一个带有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>

现在,当你想以编程方式关闭模态时,只需在该按钮上触发一个单击事件,这对用户是不可见的

在Javascript中,你可以像这样触发点击按钮:

document.getElementById('close-modal').click();

其他回答

美元(> '模式。4)模式(’hide’);

如果你在一个页面中使用多个模态弹出,使用上面的代码来隐藏模态的背景。

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

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

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

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

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

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

or

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

应该工作。

但如果没有其他工作,你可以直接调用模式关闭按钮:

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