bootstrap vue modal black background

Question

This questions been asked a lot, but there are limited solutions for BootstrapVue.
I tried adding .modal-backdrop{ display: none; z-index: -1; } and I've also tried everything solution from here
So this is what the modal looks like current and the code for it is here

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

So the modal is opened from a button in a sidebar. It also means that I cant exit or press ok/cancel since everything just goes secondary. Thanks for any help

Hi, @GuyNaeem, please clarify what you want to do. Do you want to remove the black modal background? Do you want to change its colour? Do you want to be able to use the ok/cancel buttons? — Tony, Jul 24 '20 at 23:04
Hey @Tony, Yeah I wanted to remove black background. The black background kinda disables the rest of the website where I cant click on anything and need to refresh the webpage in order to use it again. — Guy Naeem, Jul 25 '20 at 09:28

score 1 · Answer 1 · answered Jul 25 '20 at 20:26

The bootstrap-vue modal has a property called hide-backdrop. With this you can remove the "blackness" behind your modal - but it does not give you the ability to interact with something that's "behind" the modal.

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>

To have a component that pops up like a modal but allows interaction, I'd suggest you create one yourself (e.g. from the card component):

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>

that worked perfectly, Thanks a lot for the help. I see how you used b-containers, I need to start using them to be more organised — Guy Naeem, Jul 26 '20 at 22:18
but Im having trouble placing the menu button where I want it to be. So if I put it inside the container its too far to the right, I tried moving it more left using id = "menu_button" and then .menu_button but it wont budge. Any idea how I would do this — Guy Naeem, Jul 26 '20 at 22:22
@GuyNaeem **Bootstrap** is a structure that works best if you use its elements according to their purpose. For modifying placement you might want to look in **utility classes** - there’s **flex**, **spacing**, etc. If you don’t find what you are looking for among those, then you need to create a the CSS. Unfortunately, without template & code it would be pure guessing on how to move something to the left. — muka.gergely, Jul 27 '20 at 05:48

score 0 · Answer 2 · answered Mar 16 '23 at 10:15

0

As explained in this question, the problem is related to the positioning of the modal within parent components. A clean solution with Vue is using Teleport to position the modal component somewhere else in the DOM.

answered Mar 16 '23 at 10:15

Pablo

1,604
16
31

bootstrap vue modal black background

2 Answers2

Linked