Hi im trying to disable outside click in my modal. I've tried using methods like backdrop: 'static', keyboard: false but i cant seem to make it work
html:
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
</button>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
javascript:
$(function() {
$('#basicExampleModal').modal('show');
});
Hi im trying to disable outside click in my modal. I've tried using methods like backdrop: 'static', keyboard: false but i cant seem to make it work
html:
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
</button>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
javascript:
$(function() {
$('#basicExampleModal').modal('show');
});
- I'm not seeing any modal in your code here jsfiddle/0y395mbr Can you explain exactly what is wrong? – MFerguson Commented Jun 9, 2022 at 16:50
- @MFerguson I'm trying to disable outside click (closing the modal) i want the modal to stop the user from using the page unless using the suggested buttons – 505notfound Commented Jun 9, 2022 at 16:53
- The center element is deprecated. Don't use it. Bootstrap offers several ways to center things, so you don't need it anyway. – isherwood Commented Jun 9, 2022 at 19:17
4 Answers
Reset to default 3you can use "data-bs-backdrop" and "data-bs-keyboard" attributes instead of data-backdrop="static" data-keyboard="false". Bootstrap 5 has made changes to the naming conventions, and the data-backdrop and data-keyboard attributes are now prefixed with bs-.
You have couple syntax issues in the code you posted. Ex. extra </button> tag and data- keyboard="false"> has a space in it. Aside from the syntax issues, it should work as expected as you can see from below example. If it still doesn't work on your end, there is something else wrong elsewhere in your code.
$('#basicExampleModal').modal('show');<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center>
<h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
</center>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>In my case I used Bootstrap 5
<div
class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true"
data-bs-keyboard="false" data-bs-backdrop="static"
>
</div>
Bootstrap 4
<div
class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true"
data-keyboard="false" data-backdrop="static"
>
</div>
Use this:
$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
keyboard: false,
backdrop: 'static'
})
});
This script will now allow close the modal by clicking outside the modal or by pressing the esc key.