如果我点击这里
http://getbootstrap.com/2.3.2/javascript.html#modals
点击'Launch demo modal'它会完成预期的事情。我使用模式作为我的注册过程的一部分,有服务器端验证涉及。如果有问题,我想重定向到相同的模式与我的验证消息显示。目前,我不知道如何得到模式显示,而不是从用户的物理点击。如何以编程方式启动模型?
如果我点击这里
http://getbootstrap.com/2.3.2/javascript.html#modals
点击'Launch demo modal'它会完成预期的事情。我使用模式作为我的注册过程的一部分,有服务器端验证涉及。如果有问题,我想重定向到相同的模式与我的验证消息显示。目前,我不知道如何得到模式显示,而不是从用户的物理点击。如何以编程方式启动模型?
当前回答
这是你用三元运算符做的
$('#myModal').modal( variable === 'someString' ? 'show' : 'hide');
其他回答
下面的代码用于在openModal()函数上打开modal,在closemmodal()上关闭modal:
function openModal() {
$(document).ready(function(){
$("#myModal").modal();
});
}
function closeModal () {
$(document).ready(function(){
$("#myModal").modal('hide');
});
}
/* #myModal是modal弹出窗口的id */
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS
$('button').click(function(){
$('#myModal').modal('show');
});
演示JSFIDDLE
这是一个没有jQuery的Bootstrap v5的代码。
let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();
Demo
这是一个以编程方式打开页面加载模式的代码和盒子演示。
https://idu6i.csb.app/
Refs
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript https://getbootstrap.com/docs/5.0/components/modal/#show
这是你用三元运算符做的
$('#myModal').modal( variable === 'someString' ? 'show' : 'hide');
你不应该在触发模式的元素(比如按钮)中写入data-toggle="modal",你可以手动显示模式:
$('#myModal').modal('show');
和藏在一起:
$('#myModal').modal('hide');