CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Pink Code
Pink Code

Reputation: 1834

multiple bootstrap modal windows in page

i need to multiple bootstrap 3 modal in one page. I change ID for each modal box and this worked But IDs must be unique.

HTML :

<span class="filesicon"><a data-target="#myModal-1" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
<span class="filesicon"><a data-target="#myModal-2" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>

<div class="modal fade" id="myModal-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body" style="padding:0px; margin:0px width: 560px;">
                <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal-2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body" style="padding:0px; margin:0px width: 560px;">
                <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
            </div>
        </div>
    </div>
</div>

My way Is True? If Not, Please tell me better way.

Upvotes: 1

Views: 2795

Answers (3)

Turqueso
Turqueso

Reputation: 431

I used your code in bootply and seems to work fine. Maybe there is something else in your code messing up with your Modals

Or try

<script> $('#myModal-1').modal(options) $('#myModal-2').modal(options) </script>

to initate. This as done the trick for me on similar situations.

Upvotes: 1

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

If using an additional plugin is an option, have you considered bootbox.js?

It allows you to display bootstrap modals using a few lines of javascript rather than the bulky HTML.

example to show a bootstrap modal asking the user to confirm some action:

bootbox.confirm("Are you sure?", function(result) {
   Example.show("Confirm result: "+result);
});

http://bootboxjs.com/

Upvotes: 0

Christopher Esbrandt
Christopher Esbrandt

Reputation: 1198

That is the correct way of putting multiple modals on a single page. There is simply no avoiding it.

You'd call each modal the same way, just changing the data-target to reflect the desired modal to display.

<a href="#" class="list-group-item" id="myModal-1-link" data-toggle="modal" data-target="#myModal-1">Modal 1</a>
<a href="#" class="list-group-item" id="myModal-2-link" data-toggle="modal" data-target="#myModal-2">Modal 2</a>

There isn't any other way to do it, not with Bootstrap, but I'm sure there are other options for modals that are simplier, though I doubt they'd work so fluently with Bootstrap.

Upvotes: 0

Related Questions