CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Saurabh Singh
Saurabh Singh

Reputation: 23

popup window not coming in bootstrap by using modal class

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>

Upvotes: 1

Views: 659

Answers (1)

Ram
Ram

Reputation: 19

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

Upvotes: 1

Related Questions