Enable Background When Open Bootstrap Modal Popup

Enable background use with modal open in Bootstrap 4

I'm focusing on the .modal-backdrop here, as I assume you already solved the draggable part by using jQuery UI.

When it is used, .modal-backdrop actually is a fixed positioned div element covering the entire viewport and inserted before the </body> tag when the modal dialog is shown. By default this provides the shaded background behind the modal, and also listens to click events to close the modal if needed.

By using data-backdrop="false" this element is not inserted into the DOM, so visually it will seem that there is nothing behind the modal. However, the .modal tag is also an element covering all the viewport (above the page, in the foreground), and acts as a wrapper for the actual .modal-dialog tag.

So, in your scenario it is actually the .modal that is blocking (or catching) user interactions from the rest of your page.

You can overcome that with the help of the pointer-events css property like so:

.modal {
    pointer-events: none;
}

The .modal-dialog will still receive interactions and will work as expected, but the page in the background will be clickable too.

Bootstrap modal enable background

You have to change/override the .modal class. When your window is open, if you inspect the background with your web inspector, you will see everything is contained in a div with the classes: modal, fade and in.
The "modal" class has the following css properties, which sets it to cover the whole screen, making your site unclickable.

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

You would have to remove the fixed property or modify the top,right,bottom and left properties. However, if you removed the fixed property, you will not be able to use the z-index property, which gives your pop-up the overlay effect.

Bootstrap Modal: allow the background interaction when modal open

Found it it happens that div was covering the entire screen the trick was to change the css from entire body to modal body . also i needed to change the position of modal here is code .

@media screen and (min-width: 768px) {
      #fullHeightModalRight {
          top : 66px;
          left: auto;
          bottom: auto;
        overflow: visible;
      }
  }

Boostrap modal: Allow background scrolling / interaction

.modal-open { overflow-y: auto; }

How to disable background when modal window pops up

You could use an overlay - another div the full size of the screen that covers the html, with the bonus of giving a translucent grey shadow over the body.

In this example, use two divs.

One is the overlay, and the other (inside the overlay for convenience) is the modal.

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>

Now the overlay needs styles:

.overlay {
  position: fixed; /* Positioning and size */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5); /* color */
  display: none; /* making it hidden by default */
}

and the modal needs some too:

.modal {
  position: fixed; /* positioning in center of page */
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px; /* size */
  width: 600px;
  background-color: white; /* background color */
}

Include jQuery by putting this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In the head tag at the top of your code.

Then, use this button to open the modal:

<button onclick="$('.overlay').show();">Open modal</button>

and this jQuery code to catch click on the overlay but not its child.

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});

$('.overlay').on('click', function(e) {

  if (e.target !== this) {

    return;

  }

  $('.overlay').hide();

});

.overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background-color: rgba(128,128,128,0.5);

  display: none;

}

.modal {

  position: fixed;

  top: 50vh;

  left: 50vw;

  transform: translate(-50%,-50%);

  height: 400px;

  width: 600px;

  background-color: white;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="https://www.google.co.uk">This is a link, but with the modal open you can't click it!</a>

<br>

<br>

<button onclick="$('.overlay').show();">Open modal</button>

<div class="overlay">

  <div class="modal">

    This is the modal. You can put whatever you like in here.

  </div>

</div>

Bootstrap modal appearing under background

If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.

Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

Here are a couple ways to do this:

1. Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag </body>.
2. Alternatively, you can remove position: CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.

Bootstrap Modal: Re-enable keyboard and backdrop

I figured out boostrap 4 change structure of configuration. You should use

$('#basicModal').data('bs.modal')._config.keyboard = true;
$('#basicModal').data('bs.modal')._config.backdrop = true;

See the https://codepen.io/anon/pen/rvmvQB

---

Related Topics