CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
nobe4
nobe4

Reputation: 2842

Bootstrap modal with opacity appearing behind the background

I have a bootstrap modal that is included inside a faded div.

For some reason, the modal, after opening, is behind the grey background and is thus not accessible.

Code

HTML

<div>
    <button class="btn btn-primary" data-target="#normal" data-toggle=
    "modal">Normal</button>
    <div class="modal fade" id="normal" role="dialog"
    tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>
<div id="faded">
    <button class="btn btn-primary" data-target="#faded-modal" data-toggle=
    "modal">Faded</button>
    <div class="modal fade" id="faded-modal" role=
    "dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>

CSS

#faded {
   opacity: 0.7;
}

Results

Normal

Normal

Faded

Faded

Demo here

As you can see on the example the first modal is correctly displayed and the second one (the faded one) is appearing behind the background, inaccessible.

How can I change this behavior? The modal should be displayed as usual ...

Notes: I cannot change the HTML, and I need to keep the opacity on the parent, this is a simpler example to show the effect but there are other elements that are faded as well.

Upvotes: 0

Views: 8464

Answers (4)

Omari Victor Omosa
Omari Victor Omosa

Reputation: 2879

The <div class="modal fade"... has to be moved out of the <div id="faded">... so that it does not take the <div class="modal fade"... as its parent div..

I.e. instead of

<div id="faded">
    <button class="btn btn-primary" data-target="#faded-modal" data-toggle=
    "modal">Faded</button>
    <div class="modal fade" id="faded-modal" role=
    "dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>

TRY...

<div id="faded">
    <button class="btn btn-primary" data-target="#faded-modal" data-toggle=
    "modal">Faded</button>

</div>

<div class="modal fade" id="faded-modal" role=
    "dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
 </div>

Upvotes: 0

Rachel S
Rachel S

Reputation: 3920

Don't apply the "faded" id to the div around the button. Apply it to the button itself. To have a faded button, apply the faded as a class to the button.

.faded{
  opacity: 0.7;
}

<div>
  <button class="btn btn-primary faded" data-toggle="modal" data-target="#faded-modal">Faded</button>...

http://jsbin.com/jefimarewi

Upvotes: 0

Anil Panwar
Anil Panwar

Reputation: 2622

Working Code, Just Added faded css to button only

#faded{
  opacity: 0.7;

}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<div>
  <button class="btn btn-primary" data-toggle="modal" data-target="#normal">Normal</button>

<div id="normal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sequi, quod, id aut tempora soluta commodi deleniti ratione nesciunt, tenetur iste incidunt veniam dolores accusantium corporis, laboriosam nam provident est.</p>
    </div>
  </div>
</div>
</div>
  
<div id="faded">   <button class="btn btn-primary" data-toggle="modal" data-target="#faded-modal">Faded</button></div>
  
  
 

<div id="faded-modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sequi, quod, id aut tempora soluta commodi deleniti ratione nesciunt, tenetur iste incidunt veniam dolores accusantium corporis, laboriosam nam provident est.</p>
    </div>

</div>
</div>

Upvotes: 0

wizzardmr42
wizzardmr42

Reputation: 1644

The second modal is also appearing in front of the background, but it is faded to 0.7 opacity because the parent element is. If you want to achieve it unfaded, you'll need to make the parent div transparent and stick a new one in with 100% width and height, the background colour and opacity set. You'll also need to use z-orders to make sure it appears behind the modal.

Upvotes: 1

Related Questions