能够使用 bootstrap-vue 在模态下点击内容

Question

希望在打开模式时能够单击按钮或 copy/select 来自 background/page 的内容。

在以下位置发现了一些东西：建议使用 .modal{bottom:initial!important;} 但这似乎不适用于 bootstrap-vue.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="node_modules/bootstrap-vue/dist/bootstrap-vue.css" />
    <style>
      .modal{bottom:initial!important;} 
    </style>
</head>

<body>
    <div id="app-2">
        <b-navbar toggleable="lg" type="dark" variant="dark">
            <b-navbar-brand href="#">NavBar</b-navbar-brand>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-nav-item href="#">Link</b-nav-item>
                    <b-nav-item href="#" disabled>Disabled</b-nav-item>
                </b-navbar-nav>

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">
                    <b-nav-form>
                        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
                        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                    </b-nav-form>

                    <b-nav-item-dropdown text="Lang" right>
                        <b-dropdown-item href="#">EN</b-dropdown-item>
                        <b-dropdown-item href="#">ES</b-dropdown-item>
                        <b-dropdown-item href="#">RU</b-dropdown-item>
                        <b-dropdown-item href="#">FA</b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown right>
                        <!-- Using 'button-content' slot -->
                        <template slot="button-content"><em>User</em></template>
                        <b-dropdown-item href="#">Profile</b-dropdown-item>
                        <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
        <b-button v-b-modal.modal-1>Launch demo modal</b-button>
        <b-modal id="modal-1" @shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop>
            <p class="my-4">Hello from modal!</p>
        </b-modal>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="node_modules/bootstrap-vue/dist/bootstrap-vue.js"></script>
    <script>
        window.dragable = function (a) {
            let header = a.vueTarget.$refs.header;
            let el = a.vueTarget.$refs.content;
            let mousePosition;
            let offset = [0, 0];
            let isDown = false;

            header.onmousedown = (e) => {
                isDown = true;
                offset = [
                    el.offsetLeft - e.clientX,
                    el.offsetTop - e.clientY
                ];
            }
            header.onmouseup = (e) => {
                isDown = false;
            };
            header.onmousemove = (e) => {
                e.preventDefault();
                if (isDown) {
                    mousePosition = {
                        x: e.clientX,
                        y: e.clientY
                    };
                    el.style.left = (mousePosition.x + offset[0]) + 'px';
                    el.style.top = (mousePosition.y + offset[1]) + 'px';
                }
            };

        }

        var app2 = new Vue({
            el: '#app-2',
            methods: {
                dragable: dragable
            }
        })

    </script>

</body>

</html>

解决方法：添加指针事件：none 到模态 css/style

window.dragable = function(a) {
  let header = a.vueTarget.$refs.header;
  let el = a.vueTarget.$refs.content;
  let modal = a.vueTarget.$refs.modal;

  let mousePosition;
  let offset = [0, 0];
  let isDown = false;

  modal.onmousedown = (e) => {
    document.querySelectorAll('.modal').forEach(e => {
      e.parentNode.style.zIndex = e.isSameNode(a.vueTarget.$refs.modal) ? 1041 : 1040;
    })
  }
  header.onmousedown = (e) => {
    isDown = true;
    offset = [
      el.offsetLeft - e.clientX,
      el.offsetTop - e.clientY
    ];
    document.querySelectorAll('.modal').forEach(e => {
      e.parentNode.style.zIndex = e.isSameNode(a.vueTarget.$refs.modal) ? 1041 : 1040;
    })
  }
  header.onmouseup = (e) => {
    isDown = false;
  };
  header.onmousemove = (e) => {
    e.preventDefault();
    if (isDown) {
      mousePosition = {
        x: e.clientX,
        y: e.clientY
      };
      el.style.left = (mousePosition.x + offset[0]) + 'px';
      el.style.top = (mousePosition.y + offset[1]) + 'px';
    }
  };

}

var n = 0;
var app2 = new Vue({
  el: '#app-2',
  methods: {
    dragable: dragable
  }
})

.modal {
  pointer-events: none;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

</head>

<body>
  <div id="app-2">
    <b-navbar toggleable="lg" type="dark" variant="dark">
      <b-navbar-brand href="#">NavBar</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item href="#">Link</b-nav-item>
          <b-nav-item href="#" disabled>Disabled</b-nav-item>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-nav-form>

          <b-nav-item-dropdown text="Lang" right>
            <b-dropdown-item href="#">EN</b-dropdown-item>
            <b-dropdown-item href="#">ES</b-dropdown-item>
            <b-dropdown-item href="#">RU</b-dropdown-item>
            <b-dropdown-item href="#">FA</b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown right>
            <!-- Using 'button-content' slot -->
            <template slot="button-content"><em>User</em></template>
            <b-dropdown-item href="#">Profile</b-dropdown-item>
            <b-dropdown-item href="#">Sign Out</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <b-button v-b-modal.modal-1>Launch demo modal</b-button>
    <b-modal id="modal-1" @shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop>
      <p class="my-4">Hello from modal!</p>
    </b-modal>
    <b-button v-b-modal.modal-2>Launch demo modal</b-button>
    <b-modal id="modal-2" @shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop>
      <p class="my-4">Hello from modal!</p>
    </b-modal>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

</body>

</html>

Answer 1

我不太记得模态背景 class。但是你应该尝试设置背景 css 属性 pointer-events: none; 它会使它 "transparent" 到所有 mouse/touch 事件。

Answer 2

您还可以通过 hide-backdrop 属性禁用背景，并通过 no-close-on-backdrop 属性禁用点击背景时关闭。

请参阅 https://deploy-preview-3503--bootstrap-vue.netlify.com/docs/components/modal#comp-ref-b-modal

上的文档

能够使用 bootstrap-vue 在模态下点击内容

Ability to click on content under modal with bootstrap-vue

vue.js

bootstrap-4

bootstrap-vue