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

IT技术 javascript twitter-bootstrap
2021-01-22 13:10:18

如果我去这里

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

然后单击“启动演示模式”它会做预期的事情。我在注册过程中使用模态,并且涉及服务器端验证。如果出现问题,我想将用户重定向到显示验证消息的相同模式。目前我不知道如何让模态显示,而不是来自用户的物理点击。如何以编程方式启动模型?

6个回答

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

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

您之前需要使用它对其进行初始化,show: false以便在您手动执行之前它不会显示。

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

myModal模态容器的id在哪里

有没有办法将自定义值或参数作为选项传递,如 $('#myModel').model({data:1,show:false})
2021-03-20 13:10:18
@divinedragon 年龄晚了我知道,但滚动到页面顶部的问题可能是由于触发带有类似标签的弹出窗口,但'<a href='#'>未能进入处理程序return falsepreventDefault在处理程序内部。浏览器按照指示进行操作并滚动到默认锚点 - 页面顶部。我已经被这个问题咬了好几次了,因为我们的 CSS 有时依赖于有一href组匹配的样式。
2021-03-21 13:10:18
@tdubs:很奇怪,它应该可以工作。查看最新的模态代码github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js到目前为止,我看到它应该仍然有效
2021-03-25 13:10:18
@ClaudioRedi,我在控制台中都试过,我发现只有一个可以使用铬。$('#myModal').modal({show: false}) 不起作用,但 $('#myModal').modal('hide') 起作用。不知道为什么
2021-03-31 13:10:18
谢谢。那行得通。然而,一个观察结果是,当我打开模态框时,它会重置滚动,如果我从页面底部触发模态框,页面会滚动到顶部。我该怎么阻止?
2021-04-12 13:10:18

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

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

并隐藏:

$('#myModal').modal('hide');
我有一个使用数据切换打开模态的 URL。然后在模态内部我有一个按钮调用一个函数,它做的最后一件事是使用您建议的隐藏方法关闭模态。伟大的!
2021-04-11 13:10:18

如果您正在寻找编程模式创建,您可能会喜欢这个:

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

演示 JSFIDDLE

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

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

演示:这里

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

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