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

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.