堆棧內存溢出
  簡體   English   中英

Javascript縮略圖彈出窗口

[英]Javascript Thumbnail Pop ups

 原文  2015-02-06 01:06:18  6   2    javascript/ php/ html/ css

問題描述

當我單擊頁面上的縮略圖鏈接時，它們無法正常工作。 似乎左側的兩個鏈接和最靠近右側的鏈接始終在工作，但中間的鏈接永遠無法工作。 這很奇怪，因為我使用相同的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;


})();

2 個解決方案

解決方案1
 0 已采納  2015-02-06 01:20:26

只需更改CSS上的內容即可：

在.modality-modal ，添加display: none ，
在.modality-modal.mm-show ，添加display: block 。

在當前代碼上，您僅通過'visibility'屬性切換模式。 請注意，將visibility : false設置為visibility : false保留該元素占用的空間，就像使用opacity: 0 。 切換display也可以解決該問題。

解決方案2
 0  2015-02-06 01:21:02

您的.modality-modal元素有問題。 它始終可見，並且覆蓋了大多數鏈接。

只需添加： 

.modality-modal {
  display: none;
}

看看是否有幫助。

我強烈建議您在進行進一步開發之前，先使用Validator檢查網站。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript彈出窗口 JavaScript中彈出式窗口的問題 在Windows JavaScript應用中模擬彈出窗口 Javascript初學者在簡單彈出窗口時遇到問題 jQuery彈出窗口-多個彈出窗口 Python Qt4防止JavaScript警報/彈出窗口 出生日期JavaScript函數-擺脫彈出窗口 打開彈出窗口時在Javascript中使用媒體查詢 具有AJAX后台任務的交互式頁面上的JavaScript超時彈出窗口 如何同時打開多個JavaScript彈出窗口？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM