javascript - Only one Modal Pops Up - Bootstrap -

-

i'm having problem bootstrap - 1 of modals popping up! i've reviewed code , couldn't find problem is. first modal coded others, don't know what's going wrong. here's codepen (like jsfiddle): codepen

and here code: references

<link href="favicon.ico" rel="icon" type="image/x-icon">  <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.js"></script>

thumbnail gallery

<div class="container">                 <div class="row">                     <div class="span12">                         <ul class="thumbnails">                             <li class="span3"><a href="#somo" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                             <li class="span3"><a href="#groth" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                             <li class="span3"><a href="#gibson" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                             <li class="span3"><a href="#baskin" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                         </ul>                     </div>                     <div class="span12">                         <ul class="thumbnails">                             <li class="span3"><a href="#obrien" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                             <li class="span3"><a href="#coh" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                             <li class="span3"><a href="#chada" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                             <li class="span3"><a href="#panikkar" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>                         </ul>                     </div>                 </div>             </div>

modals

<div id="somo" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button> <h3>meagan somo</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div>             <div id="groth" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>desi groth</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div><div id="gibson" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>jessie gibson</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div><div id="baskin" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>connor baskin</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div><div id="obrien" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>nik o'brien</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div><div id="coh" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>elizabeth coh</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div><div id="chada" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>rachel chada</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div><div id="panikkar" class="modal hide fade" tabindex="-1">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">x</button>                     <h3>manoj panikkar</h3>                 </div>                 <div class="modal-body">                     <p><img src="http://placehold.it/230x270" alt="" class="pull-left">text here.</p>                 </div>                 <div class="modal-footer">                     <button class="btn" data-dismiss="modal">close</button>             </div>

for full code, check out codepen.

you're missing </div> @ end of first <div class="modal-footer">


Comments

Post a Comment

Popular posts from this blog

java - JavaFX 2 slider labelFormatter not being used -

-
i have following code not label slider "foo50", etc... 1 expect setlabelformatter call, instead seems have no effect (the slider labelled 50, 100, etc , println's dont run). there missing? not implemented in default 2.2 skin? using oracle java 7 package javafxbugtest; import javafx.application.application; import javafx.scene.*; import javafx.scene.control.*; import javafx.stage.*; import javafx.util.stringconverter; public class javafxbugtest extends application { @override public void start(final stage primarystage) { slider cp = new slider(); cp.setlabelformatter(new stringconverter<double>() { @override public string tostring(double t) { system.out.println("nope?"); return "foo" + t.tostring(); } @override public double fromstring(string string) { system.out.println("he
Read more

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

-
the current version of mozilla firefox 23.0.1, version not support play mp3 shoutcast streams tcp port different 80 (most common 8000 shoutcast 1.9.8). i use flash when mp3 support not available in html5 audio, way detect is: try{ var = document.createelement('audio'); r = !!(a.canplaytype && !!a.canplaytype("audio/mpeg; codecs=mp3").replace(/^no$/,'')) }catch(e){ r = false; } the support mp3 shoutcast streams in firefox added in version 24 . a.canplaytype("audio/mpeg; codecs=mp3") = in chrome , firefox, chrome support, firefox not support, due current code detect not work firefox. the current version of jquery support ie 6 1.10.2, version not has .browser i think "stylized" way testing features , not querying browsers / versions, notwithstanding here see hard not violate "principle". what "stylized" way of detect mp3 icy support without navigator.useragent in firefox? ther
Read more

web - SVG not rendering properly in Firefox -

-
i have problem svg renderring in firefox. whilst works in safari, chrome or in ie, doesn't work in firefox. inspecting element seems layers there, background visible if it's z-index higher z-index of others. rendered in firefox: svg logo in firefox link original source file: svg file thanks help. ps: used sketch 3 export svg. if helps somehow. you're experiencing bug 995813 . i fixed bug time ago change still making way through release process example display correctly firefox 31 onwards released on 22 july 2014. in meantime if move fill="white" <mask> element child <use> element work around firefox bug.
Read more