stackoom
  简体   繁体   中英

popup window not coming in bootstrap by using modal class

 原文  2014-02-09 09:00:42  2   1    javascript/ jquery/ html/ css/ twitter-bootstrap

Question

I make a responsive image gallery by using bootstrap framework, I define seperate modal class for each image, But after clicking on the image no popup window is coming, Only a dark screen is shown, I checked it in bootsrap documentation, And also in other browsers, but the same problem is coming , Here's is my code: 

    <html>
<head>
<title>@ SAURABH SINGH</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div class="span6">
      <h2>Curiosity Club, JEC Jabalpur, TEAM MEMBERS</h2>
      </div>
<div class="container">
  <div class="row">
    <div class="span6">
      <ul class="thumbnail">
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/atulsir.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup1" class="thumbnail" data-toggle="modal"><img src="img/ambarsir.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/prabhakarsir1.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/nishantsir.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/saranshsir.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/mayanksir.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/abhisheksir.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/gaanda.jpg" alt=""></a></li>
        <li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/saurabh.jpg" alt=""></a></li>
        </ul>
    </div>
  </div>
  <!-- close row -->

<div id="popup" class="modal hide fade" tabindex="-1">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Atul Sinha</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/atulsir.jpg" alt="" class="pull-right"> 8th semester Information Technology student in Jabalpur engineering college</p>
      </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>


<div id="popup1" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Ambar Khan</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/ambarsir.jpg" alt="" class="pull-right">8th semester Information Technology student in Jabalpur engineering college</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

  <!--modal window-->
<div id="popup2"  class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Prabhakar Mishra</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/prabhakarsir.jpg" alt="" class="pull-right">8th semester Electronics and communication student in Jabalpur engineering college.</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

  <!--modal window-->
<div id="popup3" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Nishant Gaurav</h3>
      </div>
      <div class="modal-body">
      <p><img src="nishantsir.jpg" alt="" class="pull-right"> 6th semester Information Technology student in Jabalpur engineering college</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

  <!--modal window-->
<div id="popup4"  class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Saransh Jain</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/saranshsir.jpg" alt="" class="pull-right">6th semester Information Technology student in Jabalpur engineering college</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

  <!--modal window-->
<div id="popup5"  class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Mayank Kumar</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/mayanksir.jpg" alt="" class="pull-right">6th semester Computer Science student in Jabalpur engineering college</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

<!--modal window-->
<div id="popup6" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Abhishek Maheshwari</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/abhisheksir.jpg" alt="" class="pull-right">6th semester Electronics and Communication student in Jabalpur engineering college.</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

  <!--modal window-->
<div id="popup7"  class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Vipul Sharma</h3>
      </div>
      <div class="modal-body">
      <p><img src="img/gaanda.jpg" alt="" class="pull-right">4th semester Information Technology student in Jabalpur engineering college</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>

  <!--modal window-->
<div id="popup8" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>

      <h3>Saurabh Singh</h3>
      </div>
      <p><img src="img/saurabh.jpg" alt="" class="pull-right">4th semester Information Technology student in Jabalpur engineering college</p>
   </div>
      <div class="modal footer">
       <button class="btn" data-dismiss="modal">close</button>
      </div>
    </div>


  <script src="js/jquery-1.11.0.min.js"></script>
 <script src="js/bootstrap.min.js"></script> 
</body>
</html>

1 answers

solution1
 1  2014-11-12 07:57:40

It is always better to use one modal for all of your gallery images. Your modal isn't properly hidden until you either click outside the modal or trigger the escape key. I would also suggest you to use a single modal for your gallery.

Switch your modal-body content based on your requirements

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to get class modal-backdrop which is coming from ng-bootstrap when we click on popup modal angular 5? Using Bootstrap Modal window as PartialView Can not close popup window using Modal in joomla Modal popup on window close using javascript/jquery Angular UI Bootstrap Modal not working in eclipse. Modal Pop up coming at the bottom of the page not as popup MVC scroll windows disappear when Bootstrap modal popup window close Using modal popup on top of modal parent window in classic ASP Is it possible to fix the position of modal-popup window in center when bootstrap modal is open in ipad browsers? I am using Bootstrap v3.0.0 bootstrap video modal popup autocompletebox in modal popup bootstrap
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM