CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modalsidebar
Dexter Raymund De Guia
Dexter Raymund De Guia

Reputation: 95

Bootstrap Modal Pup Up on Sidebar sitting behind backdrop

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

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>

On click button SURVEY! on sidebar 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;
  }
}

Upvotes: 1

Views: 3274

Answers (1)

trungvose
trungvose

Reputation: 20034

@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>

Upvotes: 1

Related Questions