封闭引导模态

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

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

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

1492773 次浏览
小开
最佳答案

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

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

要关闭引导< >强模态< / >强，可以将“隐藏”作为选项传递给模态方法，如下所示

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

请看看工作提琴在这里

bootstrap也提供了你可以钩到模态功能的事件，比如如果你想在模态完成对用户隐藏时触发一个事件，你可以使用hidden.bs.modal事件，你可以在< a href = " http://getbootstrap.com/javascript/情态动词" > < / >文档中阅读更多关于模态方法和事件的信息

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

小开

我对这个的五分是，我不想有一个id的引导模式的目标，看到应该只有一个模式在一个时间，以下应该是相当足以删除模式，因为切换可能是危险的:

$('.modal').removeClass('show');
小开

这招对我很管用:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

使用这个链接模态密切

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

或

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

应该工作。

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

$("#modal .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>

小开

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

data-dismiss="modal"

而不是

data-dissmiss="modal"

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

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

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

小开
此外，你可以“点击”一个“x”，关闭对话框。 例如:< / p >

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

小开

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

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

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

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

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

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

小开

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

可以使用以下代码:

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

我们可以用以下方法关闭模式弹出窗口:

// We use data-dismiss property of modal-up in html to close the modal-up,such as


<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>


// We can close the modal pop-up through java script, such as


<div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>


$('#openModal').modal('hide'); //Using modal pop-up Id.
$('.pageModal').modal('hide'); //Using class that is defined in modal html.
小开

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

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

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

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

你可以用;

$('#' + $('.modal.show').attr('id')).modal('hide');
小开 
   function Delete(){
var id = $("#dgetid").val();
debugger
$.ajax({
type: "POST",
url: "Add_NewProduct.aspx/DeleteData",
data: "{id:'" + id + "'}",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
if (result.d == 1) {
bindData();
setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
}
}
});
};
小开

我用这个技巧以编程方式关闭了模态

添加一个带有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();
小开

这很有效

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

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

data-dismiss="modal"
小开

在我的例子中，我使用了一个按钮来显示模式

<button type="button" class="btn btn-success" style="color:white"
data-toggle="modal" data-target="#my-modal-to-show" >
<i class="fas fa-plus"></i> Call MODAL
</button>

因此，在我的代码中，为了关闭模态(id = 'my-modal-to-show')，我调用了这个函数(在Angular typescript中):

closeById(modalId: string) {
$(modalId).modal('toggle');
$(modalId+ ' .close').click();
}

如果我调用$(modalId).modal('hide')它不工作，我不知道为什么

PS:在我的模态中，我用.close类编写了按钮元素

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
小开

有时解决方案不工作，所以你必须正确地删除类，并手动添加CSS display:none。

$("#modal").removeClass("in");
$("#modal").css("display","none");
小开

试试这个

$('#modal_id').modal('hide');
小开
经过一些测试，我发现对于引导模式，在执行$(.modal).modal('show')后执行$(.modal).modal('hide')之前需要等待一段时间。我发现在我的情况下，我需要在两者之间至少500毫秒的间隔。< br > 这就是我的测试用例和解决方案:

$('.modal-loading').modal('show');
setTimeout(function() {
$('.modal-loading').modal('hide');
}, 500);
小开

你可以看到这个引用，但如果这个链接已被删除，请阅读下面的描述:

用id myModal调用一个模态，只需一行JavaScript代码:

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

选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到< em >数据——< / em >，如< em > data-backdrop = " " < / em >。

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

方法

异步方法和转换

所有API方法都是异步的，并开始一个转换。他们返回 在转换开始但结束之前立即发送给调用者。 此外，对转换组件的方法调用也将被删除 忽略。< / p >

更多信息请参阅我们的JavaScript文档

.modal(选项)

激活你的内容作为一个模式。接受可选的选项对象。

$('#myModal').modal({
keyboard: false
})

.modal(切换)

手动切换一个模式。在模态实际显示或隐藏之前返回给调用者(即在show .bs.modal或hidden.bs.modal事件发生之前)。

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

.modal(显示)

手动打开一个模式。在模态实际显示之前返回给调用者(即在show .bs.modal事件发生之前)。

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

.modal(隐藏的)

手动隐藏模式。在模态实际被隐藏之前返回给调用者(即在hidden.bs.modal事件发生之前)。

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

.modal(“handleUpdate”)

手动调整模式的位置，如果模式的高度变化，而它是打开的(即，情况下滚动条出现)。

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

.modal(处理)

破坏元素的模态。

事件

Bootstrap的模态类暴露了一些事件，用于连接到模态功能。所有的模态事件都是在模态本身触发的(即在**)。 类型描述< / p > 
|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. |
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   |
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|


$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
小开

只需在modal中添加这个

div tabindex="-1"
小开

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

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

我的回答并不像上面的许多问题那样严格地与问题相关。但这些对话帮助我弄清楚为什么我的引导模式在我点击一个非常普通的关闭按钮时没有反应，而当我按下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');
});
小开

你可以试试这个

div tabindex="-1"

在你的HTML和jquery你可以使用

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

或

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

试试这个

 $('#yourmodal').click();

提交答案