Bootstrap 5 Modal Static backdrop
Last Updated :
30 Nov, 2022
Bootstrap 5 Modal Static backdrop facilitates the modal that will not be going to be closed while clicking outside of the modal, by setting the backdrop to static.
Modal Static backdrop Classes: There are no specific classes used in Modal Static backdrop. Although, we can create the modal using Modal components classes.
Modal Static backdrop attribute:
- data-bs-backdrop: This attribute can be used to set the value as static, which will prevent the modal to be closed while clicking outside of it.
Syntax:
<div class="modal"
data-bs-backdrop="static" >
...
<div>
Example 1: This example describes the basic usage of the Modal Static backdrop in Bootstrap 5, where we will create a static modal and use an image in the body.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >
Bootstrap 5 Modal Static backdrop
</ h3 >
< button type = "button"
class = "btn btn-success"
data-bs-toggle = "modal"
data-bs-target = "#static" >
Launch GFG modal
</ button >
< div class = "modal fade"
id = "static"
data-bs-backdrop = "static" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
Static Modal
</ h5 >
< button type = "button"
class = "btn-close btn-success"
data-bs-dismiss = "modal"
aria-label = "Close" >
</ button >
</ div >
< div class = "modal-body" >
< p >
You cannot close this modal
by clicking outside
</ p >
< img src =
class = "card-img-bottom"
height = "200px"
width = "100px" >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This is another example that describes the basic usage of the Modal Static backdrop in Bootstrap 5, where we added a close button & removed the cross-mark(X) to close the Modal.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Modal Static backdrop</ h3 >
< button type = "button"
class = "btn btn-primary"
data-bs-toggle = "modal"
data-bs-target = "#static" >
Launch GFG modal
</ button >
< div class = "modal fade"
id = "static"
data-bs-backdrop = "static"
aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
Static Modal
</ h5 >
</ div >
< div class = "modal-body" >
< p >
You cannot close this modal
by clicking outside
</ p >
< img src =
class = "card-img-bottom"
height = "200px"
width = "100px" >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-success"
data-bs-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#static-backdrop
Share your thoughts in the comments
Please Login to comment...