How to Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS?

Prevent Bootstrap Modal from Closing when Clicking Outside

By expanding the modal-dialog dimensions to full window, we can avoid the outside click close.


//CSS
.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *