Bootstrap modal issue (not able to show the second modal)

Question

So I have two modals which are triggered depending on the button I click

The first one is trigeered like this:

<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>

And it is built this way

<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    bla bla
                <div class="modal-body">
                    bla bla
                </div>
                <div class="modal-footer">
                    bla bla
                </div>
            </div>
    </div>
</div>

An the second one is called using a button:

<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>

And it is built the same way:

<div class="modal fade open-dialog" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                dsfgdfg
            </div>
            <div class="modal-body">
                sdgfsdgsd
            </div>
            <div class="modal-footer">
               sdfds
            </div>
        </div>
    </div>
</div>

When I open the first one, I have no issue.

But when I want to open the second one, it disappear as soon as it has appeared.

I know that:

• I have to include only one js bootstrap file
• My scripts have to be at the end (for the sake of page rapidity loading)

Do I miss something?

Answer 1

As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>

Answer 2

This is an old question, but I had the same issue and found this.

In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.

This means that the second modal will sort of be inside the first, which causes issues.

I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.