时间戳

首页 > 解决方案 > bootstrap vue 模态黑色背景

javascript - bootstrap vue 模态黑色背景

问题描述

这个问题被问了很多，但 BootstrapVue 的解决方案有限。
我尝试添加 .modal-backdrop{ display: none; z-index: -1; } ，我也尝试了这里 的所有解决方案 所以这就是模态看起来像当前的样子，它的代码在这里这是模态电流弹出时的样子

<template>
<div>
    <b-button lg="5" variant="outline-primary" v-b-toggle.sidebar-1>
        <img src="https://cdn0.iconfinder.com/data/icons/rounded-basics/24/rounded__menu-512.png" style="float: right; width: 25px;">
        </b-button>
    <b-sidebar id="sidebar-1" title="Options" left shadow>
        <template>
            <div class="px-3 py-2">
                <h4 id="sidebar-no-header-title">Find out how to properly read and digest news from around the world, different sources safely by checking out Information</h4>
                <b-button  lg="3" class="pb-2" variant="light" @click="modalShow = !modalShow" block >Information</b-button>
                <b-modal v-model="modalShow" data-backdrop="false">Hello From Modal!</b-modal>
                <b-button  lg="3" class="pb-2" variant="light" block >Credits</b-button>
                <b-button  lg="3" class="pb-2" variant="light" block >Contact me</b-button>               
            </div>
        </template>
    </b-sidebar>
    </div>
因此，模式是从侧边栏中的按钮打开的。这也意味着我无法退出或按确定/取消，因为一切都只是次要的。谢谢你的帮助

标签： javascriptbootstrap-vue

解决方案

bootstrap-vue modal有一个名为 的属性hide-backdrop。有了这个，您可以消除模态背后的“黑暗” - 但它不会让您能够与模态“背后”的事物进行交互。

new Vue({
  el: "#app",
  data() {
    return {
      modalShow: false,
    }
  }
})
.modal-backdrop {
  display: none;
}
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <b-button lg="5" variant="outline-primary" v-b-toggle.sidebar-1>
          <img src="https://cdn0.iconfinder.com/data/icons/rounded-basics/24/rounded__menu-512.png" style="float: right; width: 25px;">
        </b-button>
        <b-sidebar id="sidebar-1" title="Options" left shadow>
          <template>
            <div class="px-3 py-2">
                <h4 id="sidebar-no-header-title">Find out how to properly read and digest news from around the world, different sources safely by checking out Information</h4>
                <b-button  lg="3" class="pb-2" variant="light" @click="modalShow = !modalShow" block >Information</b-button>
                <b-modal v-model="modalShow" hide-backdrop>Hello From Modal!</b-modal>
                <b-button  lg="3" class="pb-2" variant="light" block >Credits</b-button>
                <b-button  lg="3" class="pb-2" variant="light" block >Contact me</b-button>               
            </div>
          </template>
        </b-sidebar>
      </b-col>
    </b-row>
  </b-container>
</div>

要让一个像 a 一样弹出modal但允许交互的组件，我建议您自己创建一个（例如从card组件）：

new Vue({
  el: "#app",
  data() {
    return {
      modalShow: false,
    }
  }
})
.modalCard {
  position: fixed;
  width: 100%;
  z-index: 1050;
}
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <b-button lg="5" variant="outline-primary" v-b-toggle.sidebar-1>
          <img src="https://cdn0.iconfinder.com/data/icons/rounded-basics/24/rounded__menu-512.png" style="float: right; width: 25px;">
        </b-button>
        <b-sidebar id="sidebar-1" title="Options" left shadow>
          <template>
            <div class="px-3 py-2">
                <h4 id="sidebar-no-header-title">Find out how to properly read and digest news from around the world, different sources safely by checking out Information</h4>
                <b-button  lg="3" class="pb-2" variant="light" @click="modalShow = !modalShow" block >Information</b-button>
                <b-button  lg="3" class="pb-2" variant="light" block >Credits</b-button>
                <b-button  lg="3" class="pb-2" variant="light" block >Contact me</b-button>               
            </div>
          </template>
        </b-sidebar>
      </b-col>
    </b-row>
    <b-row v-if="modalShow" class="modalCard">
      <b-col>
        <b-card class="shadow">
          Hello From Modal-Like Card!
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</div>

推荐阅读