Bootstrap Modal sitting behind backdrop

by

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.

More Related Contents:

  1. Bootstrap 3 modal vertical position center
  2. Working with CSS in React [closed]
  3. Bootstrap NavBar with left, center or right aligned items
  4. Understanding z-index stacking order
  5. Remove padding from columns in Bootstrap 3
  6. Bootstrap Center Vertical and Horizontal Alignment
  7. Customizing Bootstrap CSS template
  8. Which CSS properties create a stacking context?
  9. How to use particular CSS styles based on screen size / device
  10. What has bigger priority: opacity or z-index in browsers?
  11. How can I center elements horizontally or vertically with Twitter Bootstrap?
  12. How to set up fixed width for ?
  13. IE7 Z-Index issue – Context Menu
  14. Disable click outside of bootstrap modal area to close modal [duplicate]
  15. Modify twitter bootstrap navbar
  16. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  17. Internet Explorer z-index bug?
  18. What is class=”mb-0″ in Bootstrap 4?
  19. Z-index with before pseudo-element
  20. Bootstrap 4 – Navbar items outside the collapse
  21. Bootstrap change order of columns
  22. Twitter Bootstrap 3 – Panels of Equal Height in a Fluid Row
  23. Float a div above page content
  24. Set div height equal to screen size
  25. Styling twitter bootstrap buttons
  26. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  27. CSS negative z-index: what does it mean?
  28. How to make a Bootstrap 4 full width dropdown in Navbar?
  29. Bootstrap Navbar list items/links not showing
  30. Center a column using Twitter Bootstrap

Leave a Comment