Bootstrap: Handle multiple modal dialogs

Question

I want to deal with two different modal dialogs within Twitter Bootstrap.

So the idea is that I just copy the modal dialog HTML and create a new button (BTN2) with data-toggle="modal2". And with a click on the new button (BTN2), the second modal dialog should show up, and not the first one.

I tried it with a click on BTN2 but none of the dialogs showed up. On the existing button (BTN1), however, both dialogs show up.

This is the current modal dialog. Yes it is based on the example provided by bootstrap.com, thus the bs-example-modal-lg class.

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="PodcastModal" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <ul class="nav nav-tabs" role="tablist" id="list"></ul>
         </div>
         <div class="modal-body">
            <div id="items"></div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">Done!</button>
         </div>
      </div>
   </div>
</div>

This is the button to call the modal dialog.

<div class="btn-group">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
    <span class="glyphicon glyphicon-plus"></span> <span class="hidden-xs">Add</span>List</button>
</div>

Have you considered the approach of only having one modal?: http://getbootstrap.com/javascript/#modals-related-target — cvrebert, Jan 30 '15 at 16:17

Laura · Accepted Answer · 2015-01-30T16:03:25.913

11

The data-toggle value is not the one responsible for which modal opens, you need the
data-target for that. So give each of your modals an id, and reference that with
data-target="#foo":

<div class="modal" id="modal1"></div>
<div class="modal" id="modal2"></div>

<button data-toggle="modal" data-target="#modal2">
<button data-toggle="modal" data-target="#modal1">

(stripped down to the relevant parts)

Watch out though, if you ever do some meddling with javascript or open a modal from a modal:

Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

(from the bootstrap docs)

edited Jan 30 '15 at 16:03

answered Jan 30 '15 at 15:57

Laura

3,233
3
28
45

1

As long as he's not invoking them with JS but doing it this way he shouldn't have that issue. Great answer. – Joe Swindell Jan 30 '15 at 15:59
This works! Thank you. My problem was that I changed the data-toggle of the button to something different than *modal*, b/c I thought it have to be different to the first modal. – undefined Feb 01 '15 at 15:41

score 2 · Answer 2 · answered Jan 30 '15 at 16:05

Maybe taking a look at this modal example on getbootstrap.com instead will help:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

source: http://getbootstrap.com/javascript/#modals

There is a data-target attribute on the button element that is associated with an id of the modal div element. In this case, id="myModal". You could create as many modals as you want by using this structure and making sure each button's data-target references a unique id of a modal.

score 2 · Answer 3 · edited Mar 11 '20 at 15:37

There are two things, data-toggle="modal" and data-target="#modalId"

data-toggle="modal": identifies the DOM object having class "modal" and toggles it on the button. Since modals are initially hidden, it just toggles the display and shows the modal dialog.

data-target="#modalId": identifies the DOM object having id "modalId" and targets that for data-toggle. This data attribute basically associates the button to the modal popup that needs to be toggled (displayed).

<div id="modal1" class="modal"></div>
<div id="modal2" class="modal"></div>
...
...


<button data-toggle="modal" data-target="#modal1"></button>
//this will display first modal (modal1)   

<button data-toggle="modal" data-target="#modal1"></button>
//this will display second modal (modal2)

Bootstrap: Handle multiple modal dialogs

3 Answers3