Question

我是编程新手，我有一个简单的问题，但我不知道该怎么做。

我从Boostrap 4获得了这个工作代码：

 <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
      Launch demo modal
    </button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

但是我不想创建一个按钮来触发模态内容，而不是使用按钮：

function openModal(){
  /* DESCRIPTION: Open the warning modal */
   // data-toggle="modal" data-target="#exampleModal"
}

但是我不知道如何与data-toggle相同， data-target在按钮中单击。

有人暗示怎么做？

Answer 1

您必须将Bootstrap JS api用于模式（此答案末尾的链接）。

这是简单的答案：-）

function openModal(){
   /* DESCRIPTION: Open the warning modal */
   $('#exampleModalLong').modal('show');

}

这是与此相关的另一个SO问题：How can I trigger a Bootstrap modal programmatically?

此处是有关Bootstrap官方文档的各种模式的各种javascript方法的详细链接。

https://getbootstrap.com/docs/4.0/components/modal/#methods

Answer 2

只需在函数中使用此行：

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

注意：请记住用myModal替换您的模式ID。

在函数内引导数据切换模式内容

2 个答案: