如何以编程方式触发引导模式?

If I go here

如果我去这里

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

http://getbootstrap.com/2.3.2/javascript.html情态动词

And click 'Launch demo modal' it does the expected thing. I'm using the modal as part of my signup process and there is server side validation involved. If there are problems I want to redirect the user to the same modal with my validation messages displayed. At the moment I can't figure out how to get the modal to display other than a physical click from the user. How can I launch the model programmatically?

点击“启动演示模态”，它会完成预期的事情。我使用模态作为注册过程的一部分，其中包含服务器端验证。如果有问题，我想将用户重定向到与显示验证消息相同的模式。目前，除了用户的物理点击之外，我还不知道如何显示模式。如何以编程方式启动模型?

6 个解决方案

#1

266

In order to manually show the modal pop up you have to do this

为了手动显示模式弹出，你必须这样做

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

You previously need to initialize it with show: false so it won't show until you manually do it.

您以前需要用show: false初始化它，直到您手动操作它时它才会显示。

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

Where myModal is the name of the modal container.

myModal是模式容器的名称。

#2

You should't write data-toggle="modal" in the element which triggered the modal (like a button), and you manually can show the modal with:

在触发模态的元素(如按钮)中不应写入data-toggle="modal"，可以手动显示模态:

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

and hide with:

和隐藏:

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

#3

If you are looking for a programmatical modal creation, you might love this:

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

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

Even though Bootstrap's modal provides a javascript way for modal creation, you still need to write modal's html markups first.

尽管Bootstrap的模式为模式创建提供了一种javascript方法，但您仍然需要首先编写模式的html标记。

#4

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">&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>

$('button').click(function(){
$('#myModal').modal('show');
});

DEMO JSFIDDLE

演示JSFIDDLE

#5

you can show the model via jquery (javascript)

可以通过jquery (javascript)显示模型

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

Demo: here

演示:

or you can just remove the class "hide"

或者你可以删除类"隐藏"

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

#6

I wanted to do this the angular (2/4) way, here is what I did:

我想用角(2/4)的方式来做，这就是我所做的:

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

Important things to note:

重要注意事项:

visible is a variable (boolean) in the component which governs modal's visibility.
可见是控制模态可见性的组件中的一个变量(布尔)。
show and in are bootstrap classes.
show和in是引导类。

#1

266