封闭引导模态

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

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

2018-08-30 12:19:55

其他回答

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

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

2017-02-22 22:39:43

你可以试试这个

div tabindex="-1"

在你的HTML和jquery你可以使用

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

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

2022-06-14 06:20:38

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

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

2013-05-11 03:19:28

这很有效

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

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

data-dismiss="modal"

2018-11-19 13:11:29

只需在modal中添加这个

div tabindex="-1"

2020-07-07 11:39:34

封闭引导模态

推荐文章

最新文章

标签