xxxxxxxxxx
//with jQuery
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
jQuery, bootstrap, modal
xxxxxxxxxx
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>
xxxxxxxxxx
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
xxxxxxxxxx
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
xxxxxxxxxx
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
or in HTML
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
xxxxxxxxxx
<body>
<div class="modal fade" id="modalID" tabindex="-1" data-bs-backdrop="true" style="border-radius:38px;">
<div class="modal-dialog">
<div class="modal-content">
Lorem ipsum .
</div>
</div>
</div>
</body>
<script>
// Bootstrap 5
let modal = new bootstrap.Modal( document.querySelector('#emailValidation'), { backdrop: true, keyboard: true } );
modal.toggle();
</script>
xxxxxxxxxx
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
xxxxxxxxxx
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">