How Do I Make The Background Of A Modal Clickable?

I want to create a chatbox that can be plugged into website. I have been using Bootstrap Modal to achieve this. I want my modal to not close when user clicks outside the modal. Bu

Solution 1:

You could use pointer-events: none; on .modal and .modal-backdrop. Or hide .modal-backdrop with display: none;

.modal {
    pointer-events: none;
}
.modal-backdrop {
    display: none;
}

EXAMPLE

To be honest, if you are going to modify the functionality of the bootstrap modal this much, you may as well just use a custom element with fixed position rather than trying to fight the Bootstrap CSS.