如何以编程方式触发Bootstrap模式？

如果我去这里

http://getbootstrap.com/2.3.2/javascript.html#modals

然后点击“启动演示模式”它做预期的事情。 我使用模式作为我的注册过程的一部分，并涉及服务器端validation。 如果有问题，我想redirect用户到我的validation信息显示相同的模式。 目前，我无法弄清楚如何让模态显示，而不是从用户的物理点击。 如何以编程方式启动模型？

Answer 1

为了手动显示模态popup，你必须这样做

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

您以前需要使用show: false来初始化它，所以直到手动执行它才会显示。

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

myModal是模态容器的名称。

Answer 2

您不应该在触发模式的元素（如button）中写入data-toggle =“modal” ，而且您可以手动显示模式：

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

并隐藏着：

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

Answer 3

如果你正在寻找一个程式化的模式创作，你可能会喜欢这个：

http://nakupanda.github.io/bootstrap3-dialog/

尽pipeBootstrap的模态为模式创build提供了一种javascript方式，但仍然需要先编写模态的html标记。

Answer 4

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">&times;</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'); }); 

DEMO JSFIDDLE

Answer 5

你可以通过jquery（javascript）显示模型

 $('#yourModalID').modal({ show: true }) 

演示： 在这里

或者你可以删除类“隐藏”

 <div class="modal" id="yourModalID"> # modal content </div> 

Answer 6

我想这样做angular (2/4)方式，这是我做的：

 <div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog"> .. </div>` 

重要的事情要注意 ：

• visible是组件中的variables（boolean），它控制着模态的可见性。
• show和引导类。