Different css styles of .modal-open for different modals-CodePudding

i have a modal with id #exampleModal , and there are three more modals in website.

What i want is when i open the #exampleModal the .modal-open class should have this css

    .modal-open{
       overflow-y : "scroll" 
    }

And when the other three opens they should have the default that bootstrap gives?

CodePudding user response：

Good practice if you have multiple Modals (or multiple carousels/accordions etc) is to make sure they all have a different id. This is important for W3C validation especially. So, when you have set each one say as id="modal-1" and id="modal-2" etc can then edit the CSS for each id independently of the others.

You can enter anything you want as the id variable.

#modal-1{
  /* Your styling */
}

#modal-2{
  /* Your styling */
}

CodePudding user response：

bootstrap run this automatically when modal is shown



var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('shown.bs.modal', function (event) {
     exampleModal.style.overflowY = "scroll";
})