Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS
By expanding the .modal-dialog class dimensions to full window, we can avoid the outside click closing issue.
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;
}
}
Demo
See the Pen Prevent the Bootstrap Modal Closing when Clicking Outside the modal by Vinothkumar Rajendran (@fedtutorial) on CodePen.0