Javascript缩略图弹出框

Question

当您点击它们时，我的页面上的缩略图链接工作不正常。看起来左边的两个链接和最右边的链接大多数时间都在工作，但中间链接并不工作。这很奇怪，因为我使用相同的PHP代码来构建所有这些链接。是否有可能以某种方式压垮了信息页面？我将如何去解决这个问题？

http://www.robhorlacher.ca/legacyprojects.php

HTML

<div id="content"> 
    <div id="topspace"></div> 
    <div id="projectContainer"> 
    <?php 

$hostname = 'localhost'; 
$username = 'robhorla_admin'; 
$password = 'catinthehat4'; 

$connection = mysql_connect($hostname, $username, $password) 
or die ('Connection error!!!'); 

$database = 'robhorla_legacy'; 
mysql_select_db($database); 

    $execute_statement = "SELECT * FROM Main ORDER BY ID DESC"; 

    $results = mysql_query($execute_statement) or die ('Error executing SQL statement!!!'); 

     while ($row = mysql_fetch_array($results)) { 

     $ID = $row["ID"]; 
     $datetime = $row["DateTime"]; 
     $tableID = $row["TID"]; 
     $type = $row["Type"]; 
     $section = $row["Section"]; 

    if ($type == "Websites") { 

      $execute_statement2 = "SELECT * FROM Websites WHERE WID = $tableID"; 

      $results2 = mysql_query($execute_statement2) or die ('Error executing SQL statement2!!!'); 


      while ($row2 = mysql_fetch_array($results2)) { 

      $wid = $row2["WID"]; 
      $wname = $row2["Name"]; 
      $wimage = $row2["Image"]; 
      $wdescription = $row2["Description"]; 
      $wextension = $row2["URL"]; 
      $wthumbnail = $row2["Thumbnail"]; 

      print "<div class=\"thumbnail\">"; 
       print "<a href=\"#yourModalId$ID\"><img src = \"uploads/$wthumbnail\" alt=\"$wname\" width=\"150\" height=\"150\">"; 
       print "</a></a>"; 
      print "</div>"; 
       print "<div id=\"yourModalId$ID\" class=\"yourModalClass\" style=\"display:none;\">"; 



         print "<div class=\"toppop\">"; 
          print "<div class=\"poptitle\">$wname</div>"; 
          print "<div class=\"popclose\"><a href=\"#yourModalId$ID\"><img src=\"images/close_off.png\" alt=\"Close Popup\" width=\"45\" height=\"47\" id=\"Close Popup\"></a></div>"; 
          print "<div class=\"toppopfooter\"></div>"; 
         print "</div>"; 
      print "<div class=\"WebImage\">"; 
      print "<img src = \"uploads/$wimage\" width=\"auto\" height=\"auto\"></a>"; 
      print "</div>"; 
    print "<div class=\"WebDescription\">";  
    print $wdescription; 
    print "&nbsp;&nbsp;"; 
    print "<a href=\"http://$wextension\" target=\"_blank\">"; 
    print "Go to Website"; 
    print "</a>"; 
    print "</div>"; 

    print "</div>"; 
    print "<script src=\"js/modality.js\"></script>"; 
    print "<script>"; 
    print "var modal1 = Modality.init('#yourModalId$ID', {"; 
    print " effect: 'slide-up'"; 
    print "});"; 
    print "</script>"; 
      } 
    } 

    else if ($type == "Videos") { 

     $execute_statement3 = "SELECT * FROM Videos WHERE VID = $tableID"; 

     $results3 = mysql_query($execute_statement3) or die ('Error executing SQL statement3!!!'); 

       while ($row3 = mysql_fetch_array($results3)) { 

       $vid = $row3["VID"]; 
       $vname = $row3["Name"]; 
       $vdescription = $row3["Description"]; 
       $vextension = $row3["Extension"]; 
       $vthumbnail = $row3["Thumbnail"]; 
    print "<div class=\"thumbnail\">"; 
    print "<a href=\"#yourModalId$ID\"><img src = \"uploads/$vthumbnail\" alt=\"$vname\" width=\"150\" height=\"150\" border=\"0\" id=\"$vname\" />"; 
    print "</a></a>"; 
    print "</div>"; 

    print "<div id=\"yourModalId$ID\" class=\"yourModalClassvideo\" style=\"display:none;\">"; 

      print "<div class=\"toppop\">"; 
          print "<div class=\"poptitle\">$vname</div>"; 
          print "<div class=\"popclose\"><a href=\"#yourModalId$ID\"><img src=\"images/close_off.png\" alt=\"Close Popup\" width=\"45\" height=\"47\" id=\"Close Popup\"></a></div>"; 
          print "<div class=\"toppopfooter\"></div>"; 
      print "</div>"; 

      print "<div class=\"Video\">"; 
      print $vextension; 
      print "</div>"; 
      print "<div class=\"VideoDescription\">"; 
      print $vdescription; 
      print "</div>"; 


    print "</div>"; 
    print "<script src=\"js/modality.js\"></script>"; 
    print "<script>"; 
    print "var modal1 = Modality.init('#yourModalId$ID', {"; 
    print " effect: 'slide-up'"; 
    print "});"; 
    print "</script>"; 
       } 
    } 

    else if ($type == "Images") { 

    $execute_statement4 = "SELECT * FROM ImageAlbums WHERE AID = $tableID"; 

    $results4 = mysql_query($execute_statement4) or die ('Error executing SQL statement4!!!'); 

       while ($row4 = mysql_fetch_array($results4)) { 

       $aid = $row4["AID"]; 
       $album = $row4["Name"]; 
       $athumbnail = $row4["Thumbnail"]; 

    print "<div class=\"thumbnail\">"; 
    print "<a href=\"#yourModalId$ID\"><img src = \"uploads/$athumbnail\" alt=\"$album\" width=\"auto\" height=\"auto\">"; 
    print "</a></a>"; 
    print "</div>"; 

    print "<div id=\"yourModalId$ID\" class=\"yourModalClassphoto\" style=\"display:none;\">"; 
    print "<div class=\"toppop\">"; 
          print "<div class=\"poptitle\">$album</div>"; 
          print "<div class=\"popclose\"><a href=\"#yourModalId$ID\"><img src=\"images/close_off.png\" alt=\"Close Popup\" width=\"45\" height=\"47\" id=\"Close Popup\"></a></div>"; 
          print "<div class=\"toppopfooter\"></div>"; 
      print "</div>"; 

      print "<div class=\"Gallery\">"; 
      print "<script type=\"text/javascript\">"; 
      print "$(function(){"; 
      print "$('.myGallery$aid').galleryView();"; 
      print "});"; 
      print "</script>"; 
    print "<ul class=\"myGallery$aid\">"; 

    $execute_statement5 = "Select * FROM Images WHERE AID = $aid"; 

    $results5 = mysql_query($execute_statement5) or die ('Error executing SQL statement5!!!'); 

         while ($row5 = mysql_fetch_array($results5)) { 

         $extns = $row5["Extensions"]; 
         print "<li><img src = \"uploads/$extns\" width=\"auto\" height=\"auto\">"; 
         print "</a></li>"; 
         } 
    print "</ul>";     
         print "</div>"; 
         print "</div>"; 
    print "<script src=\"js/modality.js\"></script>"; 
    print "<script>"; 
    print "var modal1 = Modality.init('#yourModalId$ID', {"; 
    print " effect: 'slide-up'"; 
    print "});"; 
    print "</script>"; 
       } 

      } 
    } 

?> 
    <div id="thumbnailfooter"></div> 
    </div>  
    <div id="bottomspace"></div> 
</div> 

CSS

#body #content { 
    width: 1080px; 
    padding-bottom: 359px; 
    margin: auto; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

#body #content #topspace { 
    width: 1080px; 
    height: 80px; 
} 

#body #content #projectContainer { 
    width: 1000px; 
    height: auto; 
    margin: auto; 
} 

#body #content #projectContainer .thumbnail { 
    width: 200px; 
    height: 200px; 
    float: left; 
    margin: auto; 
    text-align: center; 
} 

.modality-modal { 
    background: rgba(0, 0, 0, 0); 
    bottom: 0; 
    left: 0; 
    opacity: 0; 
    overflow: auto; 
    position: fixed; 
    right: 0; 
    text-align: center; 
    top: 0; 
    visibility: hidden; 
    *zoom: 1;  
    -moz-transition: all 0.25s; 
    -webkit-transition: all 0.25s; 
    transition: all 0.25s; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    perspective: 1000px; 
} 
.mm-wrap { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display: inline-block; 
    *display: inline; 

    max-width: 94%; 
    text-align: left; 
    vertical-align: middle; 
    z-index: 10000; 
    *zoom: 1; 
    opacity: 0; 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    transition: all 0.4s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.modality-modal:before, .mm-ghost { 
    content: ''; 
    display: inline-block; 
    *display: inline; 
    height: 100%; 
    margin-right: -0.25em; 
    vertical-align: middle; 
    *zoom: 1; 
} 

.modality-modal.mm-show .mm-wrap { 
    opacity: 1; 
} 
body.mm-show { overflow: hidden; } 

.modality-modal.mm-show { 
    background: rgba(20, 194, 20, 0.5); 
    opacity: 1; 
    visibility: visible; 
    z-index: 10000; 
} 

#body #content #projectContainer .yourModalClass { 
    background-color: #000000; 
    border: 6px solid #FFF; 
    width: 922px; 
    height: 690px; 
    color: #fff; 
    font-family: Arial, Helvetica, sans-serif; 
} 

#body #content #projectContainer .yourModalClass .toppop { 
    width: 922px; 
    height: 47px; 
} 

#body #content #projectContainer .yourModalClass .toppop .poptitle { 
    width: 877px; 
    height: 47px; 
    float: left; 
    font-size: 42px; 
    padding-top: 12px; 
    text-indent: 24px; 
} 

#body #content #projectContainer .yourModalClass .toppop .popclose { 
    width: 45px; 
    height: 47px; 
    float: left; 
} 

#body #content #projectContainer .yourModalClass .toppop .toppopfooter { 
    width: 922px; 
    clear: both;  
} 

#body #content #projectContainer .yourModalClass .WebImage { 
    height: 450px; 
    width: auto; 
    padding-top: 34px; 
    text-align: center; 
} 

#body #content #projectContainer .yourModalClass .WebDescription { 
    width: 922px; 
    height: 120px; 
    padding-top: 34px; 
    text-indent: 50px; 
} 

#body #content #projectContainer .yourModalClassvideo { 
    background-color: #000000; 
    border: 6px solid #FFF; 
    width: 922px; 
    height: 690px; 
    color: #fff; 
    font-family: Arial, Helvetica, sans-serif; 
} 

#body #content #projectContainer .yourModalClassvideo .toppop { 
    width: 922px; 
    height: 47px; 
} 

#body #content #projectContainer .yourModalClassvideo .toppop .poptitle { 
    width: 877px; 
    height: 47px; 
    float: left; 
    font-size: 42px; 
    padding-top: 12px; 
    text-indent: 24px; 
} 

#body #content #projectContainer .yourModalClassvideo .toppop .popclose { 
    width: 45px; 
    height: 47px; 
    float: left; 
} 

#body #content #projectContainer .yourModalClassvideo .toppop .toppopfooter { 
    width: 922px; 
    clear: both;  
} 

#body #content #projectContainer .yourModalClassvideo .Video { 
    height: 450px; 
    width: auto; 
    padding-top: 34px; 
} 

#body #content #projectContainer .yourModalClassvideo .Video iframe { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

#body #content #projectContainer .yourModalClassvideo .VideoDescription { 
    width: 922px; 
    height: 120px; 
    padding-top: 34px; 
    text-indent: 50px; 
} 

#body #content #projectContainer .yourModalClassphoto { 
    background-color: #000000; 
    border: 6px solid #FFF; 
    width: 944px; 
    height: 642px; 
    color: #fff; 
    font-family: Arial, Helvetica, sans-serif; 
} 

#body #content #projectContainer .yourModalClassphoto .toppop { 
    width: 944px; 
    height: 47px; 
    text-align: left; 
} 

#body #content #projectContainer .yourModalClassphoto .toppop .poptitle { 
    width: 899px; 
    height: 47px; 
    float: left; 
    font-size: 42px; 
    padding-top: 12px; 
    text-indent: 24px; 
} 

#body #content #projectContainer .yourModalClassphoto .toppop .popclose { 
    width: 45px; 
    height: 47px; 
    float: left; 
} 

#body #content #projectContainer .yourModalClassphoto .toppop .toppopfooter { 
    width: 944px; 
    clear: both;  
} 

#body #content #projectContainer .yourModalClassphoto .Gallery { 
    width: 800px; 
    height: 445px; 
    padding-top: 61px; 
    padding-left: 67px; 
} 

/* Effect 1 & 2: scale up and down */ 
.scale-up .mm-wrap { 
    -webkit-transform: scale(0.7); 
    -moz-transform: scale(0.7); 
    -ms-transform: scale(0.7); 
    transform: scale(0.7); 
} 
.scale-down .mm-wrap { 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    transform: scale(2); 
} 
.mm-show.scale-up .mm-wrap, 
.mm-show.scale-down .mm-wrap { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
} 

#body #content #projectContainer #thumbnailfooter { 
    width: 1080px; 
    height: auto; 
    clear: both; 
} 

#body #content #bottomspace { 
    width: 1080px; 
    height: 150px; 
} 

的Javascript

;(function() { 

    var _name = "Modality", 

     _body = document.querySelector('body'), 

     _defaults = { 
      autoBind: true, 
      clickOffToClose: true, 
      closeOnEscape: true, 
      effect: "", 
      innerClass: "mm-wrap", 
      modalClass: "modality-modal", 
      onClose: "", 
      onOpen: "", 
      openClass: "mm-show", 
      openOnLoad: false, 
      userClass: "" 
     }, 


    _extend = function() { 
     var a = arguments; 
     for(var i = 1; i < a.length; i++) 
      for(var key in a[i]) 
       if(a[i].hasOwnProperty(key)) 
        a[0][key] = a[i][key]; 
     return a[0]; 
    }, 


    _addEvent = function(target, event, fn) { 
     if (target.attachEvent) { 
      target['e'+event+fn] = fn; 
      target[event+fn] = function(){ target['e'+event+fn](window.event); } 
      target.attachEvent('on'+event, target[event+fn]); 
     } else { 
      target.addEventListener(event, fn, false); 
     } 
    }, 


    hasClass = function(target, className) { 
     return target.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); 
    }, 
    addClass = function(target, className) { 
     for(var i = 0; i < target.length; i++) 
      if(! hasClass(target[i], className)) 
       target[i].className += " " + className; 
    }, 
    removeClass = function(target, className) { 
     for(var i = 0; i < target.length; i++) { 
      if(hasClass(target[i], className)) { 
       var re = new RegExp("(\\s|^)" + className + "(\\s|$)", "g"); 
       target[i].className = target[i].className.replace(re , ''); 
      } 
     } 
    }, 

    _wrap = function (element, settings) { 

     var container = document.createElement('div'); 
     container.setAttribute('class', settings.modalClass + ' ' + settings.effect + ' ' + settings.userClass); 
     container.innerHTML = '<div class="'+settings.innerClass+'">' + element.outerHTML + '</div>'; 

     element.parentNode.replaceChild(container, element); 

     return container; 
    }, 



    Modality = function (element, options) { 

     var inst = this; 


     inst.defaults = _defaults; 
     inst.id  = element.getAttribute('id'); 
     inst.settings = _extend({}, _defaults, options); 
     inst.wrapper = _wrap(element, inst.settings); 
     inst.triggers = document.querySelectorAll('a[href="#'+inst.id+'"], [data-modality="#'+inst.id+'"]'); 
     inst.modal = document.getElementById(inst.id); 

     if(inst.settings.autoBind) { 
      for(var i = 0; i < inst.triggers.length; i++) 
       inst.setTrigger(inst.triggers[i]); 
     } 

     if(inst.settings.clickOffToClose) { 
    _addEvent(inst.wrapper, "click", function(e) { 
     if(e.target == inst.wrapper) { 
      e.preventDefault(); 
      inst.close(); 
     } 
    }, false); 
} 

     if(inst.settings.closeOnEscape) { 
      _addEvent(_body, "keyup", function (e) { 
       if(e.keyCode == 27) inst.close(); 
      }, false); 
     } 


     if(inst.modal.style.display == 'none') inst.modal.style.display = ''; 

     if(inst.settings.openOnLoad) inst.open(); 


     return inst; 

    }; 



    _extend(Modality.prototype, { 

     open: function (callback) { 

      addClass([this.wrapper, _body], this.settings.openClass); 

      if (typeof this.settings.onOpen == 'function') this.settings.onOpen(); 
      if (typeof callback == 'function') callback(); 

      return this; 

     }, 

     close: function (callback) { 


      removeClass([this.wrapper, _body], this.settings.openClass); 


      if (typeof this.settings.onClose == 'function') this.settings.onClose(); 
      if (typeof callback == 'function') callback(); 

      return this; 

     }, 


     toggle: function (callback) { 
      return (this.isOpen()) ? this.close(callback) : this.open(callback); 
     }, 

     isOpen: function() { 
      return hasClass(this.wrapper, this.settings.openClass); 
     }, 


     setTrigger: function (trigger) { 

      var inst = this; 

      _addEvent(trigger, "click", function (e) { 
       e.preventDefault(); inst.toggle(); 
      }, false); 

      return inst; 
     } 

    }); 


    _extend(Modality, { 

     instances: {}, 
     extend: _extend, 


     init: function (query, options) { 
      var a = {}, e = document.querySelectorAll(query); 
      for(var i = 0; i < e.length; i++) { 
       var inst = new this(e[i], options); 
       this.instances[ inst.id ] = a[i] = inst; 
      } 
      return (a[1] === undefined) ? a[0] : a; 
     } 

    }); 



    window[ _name ] = Modality; 


})(); 

Answer 1

只是改变你的CSS东西：

上.modality-modal，加display: none，
和.modality-modal.mm-show，加display: block。

在您当前的代码上，您只能通过'visibility'属性来切换模式。请注意，设置visibility : false会留下该元素占用的空间，就像使用opacity: 0一样。切换display也可以解决问题。

Answer 2

您的.modality-modal元素存在问题。它始终可见，它覆盖了大部分的链接。

只需添加：

.modality-modal { 
    display: none; 
} 

，看看是否有帮助。

我强烈建议在继续进一步开发之前用Validator检查网站。