Nic*_*k B 412 jquery modal-dialog twitter-bootstrap
我有一个我想要最初显示的引导模式对话框,然后当用户点击页面时,它会消失.我有以下内容:
$(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>
模态最初显示,但在模态外部单击时不会关闭.此外,内容区域不会显示为灰色..如何让模式最初显示,然后在用户点击区域外关闭？如何在演示中将背景变为灰色？
Tam*_*n C 662
将modal('toggle')代替modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
Sub*_*axe 388
要关闭bootstrap 模态,你可以将'hide'作为选项传递给模态方法,如下所示
$('#modal').modal('hide');
bootstrap还提供了可以挂钩到模态功能的事件,比如如果要在模式完成对用户隐藏时触发事件,可以使用hidden.bs.modal事件,您可以在此处阅读有关模态方法和事件的更多信息.文档
如果上述方法都不起作用,请为关闭按钮指定一个id并触发单击关闭按钮.
小智 73
$('#modal').modal('toggle');
要么
$('#modal').modal().hide();
应该管用.
但如果没有其他工作可以直接调用模态关闭按钮:
$("#modal .close").click()
san*_*osh 33
这对我有用:
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
使用此链接模式关闭
小智 19
$("#your-modal-id").modal('hide');
通过课程运行此调用($(".my-modal"))将不起作用.
我在这一个上面的五美分是我不想用id来定位自举模态并且看到因为一次只有一个模态应该足以移除模态,因为切换可能是危险的:
$('.modal').removeClass('show');
小智 8
尝试这个
$('#modal_id').modal('hide');
在某些情况下,打字错误可能是罪魁祸首.例如,确保您拥有:
data-dismiss="modal"
并不是
data-dissmiss="modal"
请注意第二个示例中的双"ss"将导致"关闭"按钮失败.
<!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">×</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>我们可以通过以下方式关闭模式弹出窗口:
// 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.
您可以看到此参考，但如果此链接已被删除，请阅读此说明：
用一行 JavaScript 调用一个 id 为 myModal 的模态：
$('#myModal').modal(options)
选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到data-，如data-backdrop=""。
|-----------|-------------|--------|---------------------------------------------|
| 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 方法都是异步的并开始转换。一旦转换开始，它们就会在转换结束之前返回给调用者。此外，过渡组件上的方法调用将被忽略。
.modal(选项)
将您的内容激活为模态。接受一个可选的选项对象。
$('#myModal').modal({
keyboard: false
})
.modal('切换')
手动切换模态。在模态实际显示或隐藏之前返回给调用者（即在showed.bs.modal 或 hidden.bs.modal 事件发生之前）。
$('#myModal').modal('toggle')
.modal('显示')
手动打开模态。在模态实际显示之前（即在shown.bs.modal 事件发生之前）返回给调用者。
$('#myModal').modal('show')
.modal('隐藏')
手动隐藏模态。在模态实际上被隐藏之前（即在 hidden.bs.modal 事件发生之前）返回给调用者。
$('#myModal').modal('hide')
.modal('handleUpdate')
如果模态在打开时的高度发生变化（即出现滚动条），则手动重新调整模态的位置。
$('#myModal').modal('handleUpdate')
.modal('处置')
销毁元素的模态。
活动
Bootstrap 的模态类公开了一些用于连接模态功能的事件。所有模态事件都在模态本身（即在**）处触发。类型 说明
|----------------|--------------------------------------------------------------|
| 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...
})
小智 5
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();
经过一些测试，我发现对于 bootstrap modal 需要等待一段时间才能执行$(.modal).modal('hide')afterexecute $(.modal).modal('show')。我发现在我的情况下，两者之间至少需要 500 毫秒的间隔。
这是我的测试用例和解决方案：
$('.modal-loading').modal('show');
setTimeout(function() {
$('.modal-loading').modal('hide');
}, 500);
| 归档时间： |
|
| 查看次数： |
1022655 次 |
| 最近记录： |