如果我去这里
http://getbootstrap.com/2.3.2/javascript.html#modals
然后单击“启动演示模式”它会做预期的事情。我在注册过程中使用模态,并且涉及服务器端验证。如果出现问题,我想将用户重定向到显示验证消息的相同模式。目前我不知道如何让模态显示,而不是来自用户的物理点击。如何以编程方式启动模型?
如果我去这里
http://getbootstrap.com/2.3.2/javascript.html#modals
然后单击“启动演示模式”它会做预期的事情。我在注册过程中使用模态,并且涉及服务器端验证。如果出现问题,我想将用户重定向到显示验证消息的相同模式。目前我不知道如何让模态显示,而不是来自用户的物理点击。如何以编程方式启动模型?
为了手动显示模式弹出你必须这样做
$('#myModal').modal('show');
您之前需要使用它对其进行初始化,show: false
以便在您手动执行之前它不会显示。
$('#myModal').modal({ show: false})
myModal
模态容器的id在哪里。
您不应该在触发模态的元素(如按钮)中写入data-toggle="modal",您可以手动显示模态:
$('#myModal').modal('show');
并隐藏:
$('#myModal').modal('hide');
如果您正在寻找编程模式创建,您可能会喜欢这个:
http://nakupanda.github.io/bootstrap3-dialog/
尽管 Bootstrap 的 modal 提供了一种用于创建模态的 javascript 方式,您仍然需要先编写 modal 的 html 标记。
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');
});
您可以通过 jquery (javascript) 显示模型
$('#yourModalID').modal({
show: true
})
演示:这里
或者您可以删除“隐藏”类
<div class="modal" id="yourModalID">
# modal content
</div>