website - Bootstrap 3 multiple Modal Issues -
i have page open in multiple modals. able have modal appear id="mymodal" example im trying replicate. created second 1 id="redcarpet" , cannot same window popup. im hoping can see error in code , can me fix it.
<li class="dropdown"> <a href="#" class="dropdown-toggle dropdown" data-toggle="dropdown" data-hover="dropdown" data-delay="200" data-close-others="false"><span style="color: black; font-family: 'modern regular';">photos</span></a> <ul class="dropdown-menu"> <li> <a href="#redcarpet">red carpet</a> </li> <li> <a href="#" data-toggle="modal" data-target="#mymodal"><span style="color: black; font-family: 'modern regular';">lead</span></a> </li>
× 2015 awards
<!-- red carpet modal --> <!-- modal --> <div class="modal modal-wide fade" id="redcarpet" tabindex="-1" role="dialog" aria-labelledby="redcarpetlabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="redcarpetlabel">2015 awards</h4> </div> <div class="modal-body"> <iframe src="redcarpet.html" width="580" height="780" frameborder="0" allowtransparency="true"></iframe> </div> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> <!-- /.modal --> <!-- modal --> <div class="modal modal-wide 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-hidden="true">×</button> <h4 class="modal-title" id="mymodallabel">2015 billboard music awards</h4> </div> <div class="modal-body"> <iframe src="billboardmusicawards_lead.htm" width="580" height="780" frameborder="0" allowtransparency="true"></iframe> </div> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> <!-- /.modal -->
you have changed id of modal div container redcarpet
(yes, can seen in code).
however, in data-target
attribute link invokes modal, still using old id (#mymodal
):
<a href="#" data-toggle="modal" data-target="#mymodal">