bootstrap vue 模态黑色背景

Question

这个问题被问了很多，但 BootstrapVue 的解决方案有限。
我尝试添加.modal-backdrop{ display: none; z-index: -1; } .modal-backdrop{ display: none; z-index: -1; } .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>

因此，模式是从侧边栏中的按钮打开的。 这也意味着我无法退出或按确定/取消，因为一切都只是次要的。 谢谢你的帮助

Answer 1

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" vb-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>

要拥有一个像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" vb-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>