Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
Demo
They hint at this solution in the documentation.
Answer from Schmalzy on Stack OverflowModal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Bootstrap
getbootstrap.com › docs › 4.4 › components › modal
Modal · Bootstrap
It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Bootstrap
getbootstrap.com › docs › 5.0 › components › modal
Modal · Bootstrap v5.0
The modal plugin toggles your hidden ... scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal....
Top answer 1 of 16
141
Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
Demo
They hint at this solution in the documentation.
Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
2 of 16
36
In my case, I could fix it by adding css for the .modal-backdrop
.modal-backdrop {
z-index: -1;
}
Although this works, form controls still seem to appear above the backdrop, clicking anywhere dismisses the modal, but it doesn't look great.
A better workaround for me is to bind to the shown event (once the page is loaded) and to correct the z-index property.
$('.modal').on('shown.bs.modal', function() {
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
In this case, if you are OK with changing the DOM on modal shown:
$('.modal').on('shown.bs.modal', function() {
//Make sure the modal and backdrop are siblings (changes the DOM)
$(this).before($('.modal-backdrop'));
//Make sure the z-index is higher than the backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
MDBootstrap
mdbootstrap.com › standard › modal backdrop
Bootstrap Modal Backdrop - free examples & tutorial
Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more. Default modal backdrop is a delicate shadow overlaying the rest of the page design.
Codeply
codeply.com › go › oNKsVikW6n
Bootstrap 4 modal backdrop color on Codeply
HTML, CSS, JavaScript editor playground for designers & developers to compare, prototype and test frontend frameworks
W3Schools
w3schools.com › bootstrap › tryit.asp
Modal Options
The W3Schools online code editor allows you to edit code and view the result in your browser
CoreUI
coreui.io › react › documentation › components › modal
Bootstrap Modal - extended examples and tutorials
July 5, 2023 - They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal.
Bootstrap
getbootstrap.com › docs › 5.3 › components › modal
Modal · Bootstrap v5.3
The modal plugin toggles your hidden ... scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal....
GitHub
github.com › mdbootstrap › bootstrap-modal-backdrop
GitHub - mdbootstrap/bootstrap-modal-backdrop: Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more. · GitHub
Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more. - mdbootstrap/bootstrap-modal-backdrop
Author mdbootstrap
Tailwind CSS
tailwindcss.com › plus › ui-blocks › application-ui › overlays › modal-dialogs
Tailwind CSS Modal Dialogs - Official Tailwind UI Components
Modal dialog examples for Tailwind CSS, designed and built by the creators of the framework.
TutorialsPoint
tutorialspoint.com › bootstrap › examples › modal_static_backdrop.php
Bootstrap - Modal
Modal with static backdrop · Launch modal · Modal title · This is a modal with static backdrop. Try clicking outside to close me!!! Sorry you can't, as this has a static backdrop · Close
Tutorial Republic
tutorialrepublic.com › codelab.php
Live Demo: Bootstrap Modal with Static Backdrop
View the live example as well as try and test it using the online HTML editor.
W3Schools
w3schools.com › bootstrap5 › bootstrap_modal.php
Bootstrap 5 Modal
<!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- Modal body --> <div class="modal-body"> Modal body..
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › backdrop-filter
backdrop-filter - CSS | MDN
December 16, 2025 - The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.
nopCommerce
nopcommerce.com › en › boards › topic › 40488 › bootstrap-modal-behind-backdrop-please-help-cant-get-it-working
BootStrap modal behind backdrop, please help :( cant get it working.... - nopCommerce
February 11, 2016 - $(function () { $("#myModal").appendTo("body"); }); the code basically looks for the modal and shifts it to after the body tag (as per the correct way to fix). It seams to work as my model is now visible and editable etc. Hopefully this may be of use to others who may encounter the issue. Thanks for looking. ... Same problem here. solution above makes sense because according to this http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background, placing the modal just before the closing </body> tag should solve this problem..
Bootstrap
getbootstrap.com › docs › 5.3 › layout › z-index
Z-index · Bootstrap v5.3
We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+. We don’t encourage customization of these individual values; should you change one, you likely need to change them all. ... $zindex-dropdown: 1000; $zindex-sticky: 1020; $zindex-fixed: 1030; $zindex-offcanvas-backdrop: 1040; $zindex-offcanvas: 1045; $zindex-modal-backdrop: 1050; $zindex-modal: 1055; $zindex-popover: 1070; $zindex-tooltip: 1080; $zindex-toast: 1090;
JSFiddle
jsfiddle.net › _update › nn093m84
Bootstrap Modal Backdrop Static. - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Top answer 1 of 14
1
brandonw6890098 wrote · Update: The simplest fix I found to not have the images move was to add the following CSS... it's not perfect but makes it less obvious. Apparently it's a known issue. · .modal { overflow-y:auto;}modalopen · } · Frank · That just causes the text box on the page to jump and is even more noticable and annoying. · Build one that works as you want it to work, with less html code to boot. · Here's the html code (yes that's all you need). The images are pulled in to just the 1 modal overlay using jQuery and the link attributes. · · · · ![]()
![]()
X
· · · · Close · · · · Here's the jQuery for the modal window. · · Here's the css: · .page-overlay{ · position:fixed; · left: 0px; · top: 0px; · height: 100%; · width:100%; · background: rgba(0, 0, 0, 0.5); · z-index: 200; · .lightbox-wrapper { · width: 70%; · margin: 0 auto; · .lightbox-content { · position: relative; · top: 50%; · transform: translateY(-50%); · background-color: #fff; · text-align: center; · border-radius: 7px; · padding: 25px; · -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); · -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); · box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); · overflow: hidden; · .lightbox-content img { · max-width: 100%; · height: auto; · .close-lightbox { · position: absolute; · right: 25px; · top: 15px; · padding: 10px 0 10px 0; · margin: 0; · color: #AFAFAF; · .append-content h4 { · padding: 0 0 25px 0; · font-weight: 400; · @media only screen and (max-width : 768px) { · #lightbox-wrapper { · width: 90%; · .btn-default { · float: right; · margin: 20px 0 0 0; · background: rgba(0, 0, 0, 0.2); · .btn-default:hover { · background: #FF864C; · color: #fff; · Here is your Black Vision link: · 2 of 14
0
Alll I see is the appearance of the browser's vertical scrollbar. Your images are not doing anything unusual. · Nancy · Nancy O'Shea— Product User, Community Expert & Moderator
Elixir Forum
elixirforum.com › phoenix forum › questions / help
Bootstrap modal has no fade effect and disable background color in phoenix liveview - Questions / Help - Elixir Programming Language Forum
June 6, 2021 - Hello, I need a modal to show an error to my user when it happens, then I use bootstrap modal. <%= if @open_modal do %> <!-- Modal --> <div class="modal fade show" id="modal-live" data-bs-backdrop="static" tabindex="-1"…
MUI
mui.com › material-ui › react-modal
React Modal component - Material UI
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. The component renders its children node in front of a backdrop component.