Modal stuck in `.backdrop` on button click

Question

I have 2 Bootrap modals. The first one come in when the page loaded using a little jQuery:

<script type="text/javascript">
    $(window).load(function () {
        $('#myDisclaimerModal').modal('show');
    });
</script>
....
<div class="container">
    <!-- Trigger the modal with a button -->
    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div class="modal fade" id="myDisclaimerModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered" tabindex="-1">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="background-color: #428bca; color: white; border-top-left-radius:3px; border-top-right-radius: 3px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style="text-align: center;">Disclaimer</h4>
                </div>
                <div class="modal-body">
                    <p>Lorem Ipsum blah, blah, blah...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

The second is controlled like a popup based on a simple button click:

<div class="container">
    <div id="info-button"
         class="esri-widget esri-widget--button esri-interactive"
         title="Info"
         data-toggle="modal" data-target="#infoWidgetDiv">
        <span class="esri-icon-description"></span>
    </div>
    <!-- Trigger the modal with a button -->
    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div class="modal fade" id="infoWidgetDiv" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>This is a large modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

The problem occurs when the button is clicked. The modal tries to launch but gets stuck in the .backdrop fade in. Like this:
I cannot click on the close button to close the modal; its just stuck. Is there anything obvious I am doing incorrectly here? I am wondering if there is some conflict between the 2 modals but I am not sure. Is there a way to resolve this issue?

• Note: I am using an older version of boostrap 3.2

Answer 1

As the css for modal backdrop was the source of the problem, I was able to derive a simple css-based solution. In my main.css, I simply added the following and it worked. It was basically a z-index problem:

.modal-backdrop {
    z-index: -1;
}