同样的事情也发生在我身上。我想通过单击表行打开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文档)

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

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

演示:

或者你可以删除hide类

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

​

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

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

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

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

其中myModal是模态容器的id。

下面的代码用于在openModal()函数上打开modal，在closemmodal()上关闭modal:

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

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

/* #myModal是modal弹出窗口的id */

同样的事情也发生在我身上。我想通过单击表行打开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文档)

这是一个没有jQuery的Bootstrap v5的代码。

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

Demo

这是一个以编程方式打开页面加载模式的代码和盒子演示。

https://idu6i.csb.app/

Refs

https://getbootstrap.com/docs/5.0/components/modal/#via-javascript https://getbootstrap.com/docs/5.0/components/modal/#show