Bootstrap 模态在重新加载时保持打开/活动状态

Question

我的代码中有几个按钮调用showModal(title) 。

showModal(title) {
    this.modalTitle = title
    this.$bvModal.show("add-modal")
}

目标模态如下所示。

<b-modal
   id="add-modal"
   ref="modal"
   v-bind:title="'Add Item to ' + modalTitle + ' list'"
   ...

我想要它，所以在 Vue 组件中只需要一个<b-modal>标签，但可以通过几个不同的按钮打开。 在第一页加载时，每个模式（具有不同的标题）都会按预期打开。 但是，当我更改代码并重新加载浏览器时，我会打开另一个模态，旧的模态会在预期的模态之上打开。

有没有一种方法可以确保模式不会在另一个之上打开，并且在浏览器重新加载后只打开一个模式？

谢谢

Answer 1

如果您在页面中处理多个模式，我强烈建议您使用 JavaScript。

示例：（Jquery）我正在使用 Bootstrap 4

<script type="text/javascript">
    $(document).ready(function () {
    //when triggering using buttons
        $("#button1").click(function(){
            $('#modal2').modal('hide');
        });

        $("#button2").click(function(){
            $('#modal1').modal('hide');
        });

       //on page load, and you want your modal1 to be launch
       $("#modal1").modal('show');
    });
</script>