这是一个没有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

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

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

和藏在一起:

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

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

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

尽管Bootstrap的modal提供了一种javascript方式来创建modal，你仍然需要先编写modal的html标记。

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

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

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

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

其中myModal是模态容器的id。

这是一个没有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

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

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

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

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