title: Ability to click on content under modal with bootstrap-vue
body: <p>Want to be able to click on a button or to copy/select content from the background/page when a modal is opened.</p>
  
  <p>Found something at: <a href="https://stackoverflow.com/questions/29732640/allow-people-to-click-on-links-under-bootstrap-modal-when-modal-backdrop-is-not">Allow people to click on links under bootstrap modal when modal backdrop is not present</a>
  that recommends to use .modal{bottom:initial!important;} but this doesn't seem to work with bootstrap-vue.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" href="node_modules/bootstrap-vue/dist/bootstrap-vue.css" /&gt;
      &lt;style&gt;
        .modal{bottom:initial!important;} 
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app-2"&gt;
          &lt;b-navbar toggleable="lg" type="dark" variant="dark"&gt;
              &lt;b-navbar-brand href="#"&gt;NavBar&lt;/b-navbar-brand&gt;
  
              &lt;b-navbar-toggle target="nav-collapse"&gt;&lt;/b-navbar-toggle&gt;
  
              &lt;b-collapse id="nav-collapse" is-nav&gt;
                  &lt;b-navbar-nav&gt;
                      &lt;b-nav-item href="#"&gt;Link&lt;/b-nav-item&gt;
                      &lt;b-nav-item href="#" disabled&gt;Disabled&lt;/b-nav-item&gt;
                  &lt;/b-navbar-nav&gt;
  
                  &lt;!-- Right aligned nav items --&gt;
                  &lt;b-navbar-nav class="ml-auto"&gt;
                      &lt;b-nav-form&gt;
                          &lt;b-form-input size="sm" class="mr-sm-2" placeholder="Search"&gt;&lt;/b-form-input&gt;
                          &lt;b-button size="sm" class="my-2 my-sm-0" type="submit"&gt;Search&lt;/b-button&gt;
                      &lt;/b-nav-form&gt;
  
                      &lt;b-nav-item-dropdown text="Lang" right&gt;
                          &lt;b-dropdown-item href="#"&gt;EN&lt;/b-dropdown-item&gt;
                          &lt;b-dropdown-item href="#"&gt;ES&lt;/b-dropdown-item&gt;
                          &lt;b-dropdown-item href="#"&gt;RU&lt;/b-dropdown-item&gt;
                          &lt;b-dropdown-item href="#"&gt;FA&lt;/b-dropdown-item&gt;
                      &lt;/b-nav-item-dropdown&gt;
  
                      &lt;b-nav-item-dropdown right&gt;
                          &lt;!-- Using 'button-content' slot --&gt;
                          &lt;template slot="button-content"&gt;&lt;em&gt;User&lt;/em&gt;&lt;/template&gt;
                          &lt;b-dropdown-item href="#"&gt;Profile&lt;/b-dropdown-item&gt;
                          &lt;b-dropdown-item href="#"&gt;Sign Out&lt;/b-dropdown-item&gt;
                      &lt;/b-nav-item-dropdown&gt;
                  &lt;/b-navbar-nav&gt;
              &lt;/b-collapse&gt;
          &lt;/b-navbar&gt;
          &lt;b-button v-b-modal.modal-1&gt;Launch demo modal&lt;/b-button&gt;
          &lt;b-modal id="modal-1" @shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop&gt;
              &lt;p class="my-4"&gt;Hello from modal!&lt;/p&gt;
          &lt;/b-modal&gt;
      &lt;/div&gt;
  
  
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/bootstrap-vue/dist/bootstrap-vue.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          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) =&gt; {
                  isDown = true;
                  offset = [
                      el.offsetLeft - e.clientX,
                      el.offsetTop - e.clientY
                  ];
              }
              header.onmouseup = (e) =&gt; {
                  isDown = false;
              };
              header.onmousemove = (e) =&gt; {
                  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
              }
          })
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Solution:
  Adding pointer-events:none to the modal css/style</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
      document.querySelectorAll('.modal').forEach(e =&gt; {
        e.parentNode.style.zIndex = e.isSameNode(a.vueTarget.$refs.modal) ? 1041 : 1040;
      })
    }
    header.onmousedown = (e) =&gt; {
      isDown = true;
      offset = [
        el.offsetLeft - e.clientX,
        el.offsetTop - e.clientY
      ];
      document.querySelectorAll('.modal').forEach(e =&gt; {
        e.parentNode.style.zIndex = e.isSameNode(a.vueTarget.$refs.modal) ? 1041 : 1040;
      })
    }
    header.onmouseup = (e) =&gt; {
      isDown = false;
    };
    header.onmousemove = (e) =&gt; {
      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
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    pointer-events: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app-2"&gt;
      &lt;b-navbar toggleable="lg" type="dark" variant="dark"&gt;
        &lt;b-navbar-brand href="#"&gt;NavBar&lt;/b-navbar-brand&gt;
  
        &lt;b-navbar-toggle target="nav-collapse"&gt;&lt;/b-navbar-toggle&gt;
  
        &lt;b-collapse id="nav-collapse" is-nav&gt;
          &lt;b-navbar-nav&gt;
            &lt;b-nav-item href="#"&gt;Link&lt;/b-nav-item&gt;
            &lt;b-nav-item href="#" disabled&gt;Disabled&lt;/b-nav-item&gt;
          &lt;/b-navbar-nav&gt;
  
          &lt;!-- Right aligned nav items --&gt;
          &lt;b-navbar-nav class="ml-auto"&gt;
            &lt;b-nav-form&gt;
              &lt;b-form-input size="sm" class="mr-sm-2" placeholder="Search"&gt;&lt;/b-form-input&gt;
              &lt;b-button size="sm" class="my-2 my-sm-0" type="submit"&gt;Search&lt;/b-button&gt;
            &lt;/b-nav-form&gt;
  
            &lt;b-nav-item-dropdown text="Lang" right&gt;
              &lt;b-dropdown-item href="#"&gt;EN&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;ES&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;RU&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;FA&lt;/b-dropdown-item&gt;
            &lt;/b-nav-item-dropdown&gt;
  
            &lt;b-nav-item-dropdown right&gt;
              &lt;!-- Using 'button-content' slot --&gt;
              &lt;template slot="button-content"&gt;&lt;em&gt;User&lt;/em&gt;&lt;/template&gt;
              &lt;b-dropdown-item href="#"&gt;Profile&lt;/b-dropdown-item&gt;
              &lt;b-dropdown-item href="#"&gt;Sign Out&lt;/b-dropdown-item&gt;
            &lt;/b-nav-item-dropdown&gt;
          &lt;/b-navbar-nav&gt;
        &lt;/b-collapse&gt;
      &lt;/b-navbar&gt;
      &lt;b-button v-b-modal.modal-1&gt;Launch demo modal&lt;/b-button&gt;
      &lt;b-modal id="modal-1" @shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop&gt;
        &lt;p class="my-4"&gt;Hello from modal!&lt;/p&gt;
      &lt;/b-modal&gt;
      &lt;b-button v-b-modal.modal-2&gt;Launch demo modal&lt;/b-button&gt;
      &lt;b-modal id="modal-2" @shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop&gt;
        &lt;p class="my-4"&gt;Hello from modal!&lt;/p&gt;
      &lt;/b-modal&gt;
    &lt;/div&gt;
  
  
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>