Bootstrap Modal Pup Up on Sidebar sitting behind backdrop

Question

Bootstrap's modal pop up has been appearing behind the background. Tried applying:

Bootstrap Modal sitting behind backdrop

and seem not to work. Im thinking, maybe its because its inside a sidebar. The contents of the rest of the page is called via include(). And the modal seemed to be applying on the include() layer.

<div class="nav nav-sidebar">
<input type='button' value='SURVEY!' class='btn btn-md btn-primary' data-toggle='modal' data-target='#modal'>
<!--Your Modal Body Here -->
<div class='modal fade' id='modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
          <!--Your Modal Close Button-->
          <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
          <!--Your Modal Title-->
        <h4 class='modal-title' id='myModalLabel'>Please Confirm Action</h4>
      </div>
      <div class='modal-body'>
        <!--Your Modal content here-->
        <p>Are you sure you want to proceed with your action ?</p>
      </div>
      <div class='modal-footer'>
       <a href='home.php'><button type='button' class='btn btn-primary'>Yes I Do</button></a>
      </div>
    </div>
  </div>
</div>
</div>

I want it to work in the front layer as to how it should be. Any work around for this?

EDIT Sidebar Class

.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 30px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto; 
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

Update with the sidebar class – Dexter Raymund De Guia Jul 19 '16 at 07:51 — Dexter Raymund De Guia, Jul 19 '16 at 07:51

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

@Dexter: in the Bootstrap Modal sitting behind backdrop have already mention about "move the entire modal outside of the rest of your code, to the very bottom". Have you tried as following code?

<body>
    <div class="nav nav-sidebar">
    <input type='button' value='SURVEY!' class='btn btn-md btn-primary' data-toggle='modal' data-target='#modal'>

    </div>

    <!--Your Modal Body Here -->
    <div class='modal fade' id='modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
      <div class='modal-dialog'>
        <div class='modal-content'>
          <div class='modal-header'>
              <!--Your Modal Close Button-->
              <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
              <!--Your Modal Title-->
            <h4 class='modal-title' id='myModalLabel'>Please Confirm Action</h4>
          </div>
          <div class='modal-body'>
            <!--Your Modal content here-->
            <p>Are you sure you want to proceed with your action ?</p>
          </div>
          <div class='modal-footer'>
           <a href='home.php'><button type='button' class='btn btn-primary'>Yes I Do</button></a>
          </div>
        </div>
      </div>
    </div>
</body>

edited May 23 '17 at 12:24

Community

1
1

answered Jul 19 '16 at 05:43

trungk18

19,744
8
48
83

The page only contains the sidebar and the nav bar. the rest is just included with `include()` . So I think it's not the workaround I'm looking for. – Dexter Raymund De Guia Jul 19 '16 at 06:03
Hi, can try set .modal-content {z-index: 9999999}; in css code to see what happen ? – trungk18 Jul 19 '16 at 06:16
Seemed that z-index is not applicable to `.modal-content` buy yes, im getting where you're going at. I need the same concept. Appreciate it trungk18! – Dexter Raymund De Guia Jul 19 '16 at 06:39
So now the content is located above backdrop already is this? Not sure why but probably we need to follow the html structure from Bootstrap to get what we want :) – trungk18 Jul 19 '16 at 06:44
My parent container is `
` and tried just removing the `sidebar` class and it works perfectly fine but removes the benefits of the class.
– Dexter Raymund De Guia Jul 19 '16 at 07:13
Can you bring up the css style of sidebar here and we can take a look ? – trungk18 Jul 19 '16 at 07:16

Bootstrap Modal Pup Up on Sidebar sitting behind backdrop

1 Answers1