Bootstrap 4 modal not focused when showing

Question

I am using bootstrap 4 to show modal, I have a problem when click on the button to show it it's not appear as focused on the other page content . and that's what I am trying:

    <div class="add-advertise">
                <button type="button" data-toggle="modal" data-target="#advertiseModal" class="btn btn-primary">AddAdvertise</button>
            </div>
    <!-- The Modal -->
<div class="modal" id="advertiseModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

like this pic:

how can I solve this problem?

Answer 1

Consider moving the modal to be a direct child under your body element.

From Sara Cope on CSS Tricks :

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.