使用 javascript 的模态窗口答案

【问题标题】：Modal window using javascript使用 javascript 的模态窗口
【发布时间】：2012-02-25 11:51:45
【问题描述】：

我将以下脚本添加到我的页面中，该脚本是用 html 和 css 编写的，为我的图像创建一个模式框，只是为了在打开每个图像时让它看起来更专业，允许你在不打开的情况下滚动它们/关闭窗口几次。

  <script language=javaScript>
    <!-- Beginning of JavaScript -

    var x,y,a,b,timer,thisbox,isbox,urlimg
    var posleftvorher

    var box

    if (document.layers) {
    var left_pos=".left=";
    var top_pos=".top=";
    var doc="document.";
    var stl="";
    }

    if (document.all) {
    var left_pos=".pixelLeft=";
    var top_pos=".pixelTop=";
    var doc="";
    var stl=".style";
    }

    function openbox(thisbox) {
    isbox = thisbox
        if(document.layers) {
            box = document.popupbox
            box.visibility="visible"
            document.popupbox.document.write("<img src='"+thisbox+"'>")
            document.popupbox.document.close()
            document.popupbox.left=x+25
            document.popupbox.top=y
        }

        if(document.all) {
            box = document.all.popupbox.style
            box.visibility="visible"
            popupbox.innerHTML="<img src='"+thisbox+"'>"
            eval(doc+"popupbox"+stl+left_pos+(x+25))
            eval(doc+"popupbox"+stl+top_pos+y)
            timer=setTimeout("openbox(isbox)",50)
        }

}

    function closebox(){
        clearTimeout(timer)
        box.visibility="HIDDEN"
    }

    function handlerMM(e){
    x = (document.layers) ? e.pageX : event.clientX
    y = (document.layers) ? e.pageY : event.clientY
    } 
    if
    (document.layers){
    document.captureEvents(Event.MOUSEMOVE);
    }


    document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>

然后我添加了一些 css 和 html

     <div id="main" class="mainstyle">
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"> </a>
    </div>

<div id="popupbox" style="position:absolute"></div>


        .mainstyle {
                position: absolute;
                font-family:Verdana;
                color:DDDDDD;
    font-size:40px;
    }

    A {
    color:DDDDDD;
    text-decoration:none;
    }

现在，当我实现这些代码和脚本时，什么都没有发生，图像甚至不会出现在页面中。

【问题讨论】：

<script language="javascript">,  在你的脚本块中, document.layers, document.all..?这些技术在 10 年前是现代的。此外，以这种方式使用eval 是可怕的。不要使用var doc="document";eval(doc+"."+dynamic+"item="+property);，而是使用document[dynamic+'item'] = property;。

标签： html css image window

【解决方案1】：

它在 ie 中工作。但不是在 chrome、opera 和 fire fox 中

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


     <script language=javaScript>

        var x,y,a,b,timer,thisbox,isbox,urlimg;
        var posleftvorher;

        var box;

        if (document.layers) {
        var left_pos=".left=";
        var top_pos=".top=";
        var doc="document.";
        var stl="";
        }

        if (document.all) {
        var left_pos=".pixelLeft=";
        var top_pos=".pixelTop=";
        var doc="";
        var stl=".style";
        }

        function openbox(thisbox) {
        isbox = thisbox;
            if(document.layers) {
                box = document.popupbox;
                box.visibility="visible";
                document.popupbox.write("<img src='"+thisbox+"'>");
                document.popupbox.close();
                document.popupbox.left=x+25;
                document.popupbox.top=y;
            }

            if(document.all) {
                box = document.all.popupbox.style;
                box.visibility="visible";
                popupbox.innerHTML="<img src='"+thisbox+"'>";
                eval(doc+"popupbox"+stl+left_pos+(x+25));
                eval(doc+"popupbox"+stl+top_pos+y);
                timer=setTimeout("openbox(isbox)",50);
            }

    }

        function closebox(){
            clearTimeout(timer);
            box.visibility="HIDDEN";
        }

        function handlerMM(e){
        x = (document.layers) ? e.pageX : event.clientX;
        y = (document.layers) ? e.pageY : event.clientY;
        } 
        if
        (document.layers){
        document.captureEvents(Event.MOUSEMOVE);
        }


        document.onmousemove = handlerMM;

    </script>

    <style type="text/css">
     .mainstyle {
                    position: relative;
                    font-family:Verdana;
                    color:#FF0000;
        font-size:40px;
        }

        a {
        color:#0033FF;
        text-decoration:none;
        }
    </style>

    </head>

    <body>


    <div id="main" class="mainstyle">
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">aaaaaaaaaa</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()"> bbbbb</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">ccccccc</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">dddddddd</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">eeeeeeee</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">ffffffff</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">ggggggg</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()"> hhhhhhhh</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">iiiiiii </a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">jjjjjj </a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">kkkkkkk</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()"> lllll</a>
        </div>

    <p>&nbsp;</p>

    <div id="popupbox" style="position:absolute"></div>


    </body>
    </html>

错误是，

锚里面什么都没有
# 不在颜色中（在 css 中）
；未在 java 脚本中使用

【讨论】：

为了方便我把图片src改了，你要放回去