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>