Question

如果我去这里

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

点击“启动演示模式”即可完成预期的操作。我正在使用模式作为我的注册过程的一部分，并且涉及服务器端验证。如果有问题，我想将用户重定向到同一模式，并显示我的验证消息。目前我无法弄清楚除了来自用户的物理点击之外如何显示模态。如何以编程方式启动模型？

Answer 1

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

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

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

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

其中myModal是模态容器的id。

Answer 2

你不应该在触发模态的元素（如按钮）中写 data-toggle =“modal”，你可以手动显示模态：

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

并隐藏：

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

Answer 3

如果您正在寻找程序化的模态创建，您可能会喜欢这个：

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

尽管Bootstrap的模态为模态创建提供了一种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
})

演示：here

或者你可以删除“hide”类

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

Answer 6

这是 Bootstrap v5 without jQuery 的代码。

let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();

演示

这是一个 codesandbox 演示，用于在页面加载时以编程方式打开模式。

https://idu6i.csb.app/

参考

Answer 7

我想以angular (2/4)的方式做到这一点，这就是我所做的：

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

注意：

的重要事项

visible是组件中的变量（布尔值），用于控制模态的可见性。
show和in是引导类。

Answer 8

我也发生了同样的事情。我想通过单击表行来打开Bootstrap模式，并获取有关每一行的更多详细信息。我用一个技巧来做到这一点，我称之为虚拟按钮！与最新版本的Bootstrap（v5.0.0-alpha2）兼容。对其他人也可能有用。

查看带有预览的以下代码段： https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba

摘要：

let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";

//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
    row.addEventListener('click', e => {
        //Set parameteres (clone row dataset)
        exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
        //Button click simulation
        //Now we can use relatedTarget
        exampleButton.click();
    })
});

所有这些都是使用relatedTarget属性。（请参见Bootstrap docs）

Answer 9

以下代码可用于在openModal（）函数上打开模式并在closeModal（）上关闭模式：

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/ * #myModal是模式弹出窗口的ID * /

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

9 个答案:

演示

参考