Bootstrap Modal: allow the background interaction when modal open

Question

I am creating a dynamic modal using javascript. I want to allow the mouse interaction on other background elements buttons, input forms etc on body when modal is open. main line of code for modal is as below.

element1 = document.createElement('div');
element1.setAttribute("id", "myModal");
element1.setAttribute("role", "dialog");
element1.setAttribute("data-keyboard", "false");
element1.setAttribute("data-backdrop", "false");
element1.className = 'modal fade';
document.body.appendChild(element1);

Answer 1

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

Answer 2

I have also faced same issue and resolved my problem using css and js code. data-backdrop="false" will remove background black screen only but it will not allow you to do anything on background element. To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate. and need to use some custom css style. Add a custom class with modal

element1.className = 'modal fade custom-modal';

then add css for custom-modal css class

.custom-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height: fit-content;
    padding: 0 !important;
}
//inner css class style//
.modal-dialog{marging:0}

now after populate modal need to remove 'modal' class from element like removeClass("modal")