Javascript缩略图弹出窗口

当你点击我页面上的缩略图链接时，它们会不稳定地工作。看起来左边的两个链接和最右边的链接几乎一直都在工作，但是中间的链接从来都不工作。这很奇怪，因为我使用相同的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>

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;


})();

；（功能（）{
var\u name=“模态”，
_body=document.querySelector（'body'），
_默认值={
自动绑定：是的，
ClickOff关闭：正确，
closeOnEscape：没错，
效果：“，
innerClass:“mm wrap”，
模态类：“模态模态”，
一旦关闭：“，
onOpen:“，
openClass:“mm秀”，
openOnLoad:false，
用户类：“
}, 
_扩展=函数（）{
var a=参数；
对于（变量i=1；i

只需更改css上的某些内容：

在

模态

上，添加

显示：无

，
并在

.modity modal.mm show

上，添加

显示：块

---

在当前代码中，仅通过“可见性”属性切换模式。请注意，设置

可见性：false

会留下该元素占用的空间，就像使用

不透明度：0

一样。切换

显示

也可以解决问题。

您的

模态

元素有问题。它可以在任何时候看到

;(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;


})();

.modality-modal {
  display: none;
}