Html 使用javascript的模态窗口_Html_Css_Image_Window

Html 使用javascript的模态窗口

html css image

Html 使用javascript的模态窗口,html,css,image,window,Html,Css,Image,Window,我在我的页面中添加了以下脚本，该脚本是用html和css编写的，用于为我的图像创建一个模式框，只是为了在打开每个图像时使其看起来更专业一些，允许您在不打开/关闭窗口的情况下滚动它们几次 <script language=javaScript> <!-- Beginning of JavaScript - var x,y,a,b,timer,thisbox,isbox,urlimg var posleftvorher var box

我在我的页面中添加了以下脚本，该脚本是用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;
    }


梅斯泰尔先生{
位置：绝对位置；
字体系列：Verdana；
颜色：DDDDDD；
字体大小：40px；
}
A{
颜色：DDDDDD；
文字装饰：无；
}

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

它在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>


变量x、y、a、b、计时器、thisbox、isbox、urlimg；
var Posvorher；
var盒；
if（document.layers）{
var left_pos=“.left=”；
var top_pos=“.top=”；
var doc=“文件。”；
var stl=“”；
}
如果（全部文件）{
var left_pos=“.pixelLeft=”；
var top_pos=“.pixelTop=”；
var doc=“”；
var stl=“.style”；
}
函数openbox（thisbox）{
isbox=此框；
if（document.layers）{
box=document.popubox；
box.visibility=“可见”；
document.popubox.write（“”）；
document.popubox.close（）；
document.popubox.left=x+25；
document.popubox.top=y；
}
如果（全部文件）{
box=document.all.popubox.style；
box.visibility=“可见”；
popubox.innerHTML=“”；
评估（文档+“弹出框”+stl+左侧位置+（x+25））；
评估（文档+弹出框+stl+顶部位置+y）；
定时器=设置超时（“openbox（isbox）”，50；
}
}
函数closebox（）{
清除超时（计时器）；
box.visibility=“HIDDEN”；
}
功能手柄MM（e）{
x=（document.layers）？e.pageX:event.clientX；
y=（document.layers）？e.pageY:event.clientY；
} 
如果
（文件.图层）{
document.captureEvents（Event.MOUSEMOVE）；
}
document.onmousemove=handlerm；
梅斯泰尔先生{
位置：相对位置；
字体系列：Verdana；
颜色：#FF0000；
字体大小：40px；
}
a{
颜色：#0033FF；
文字装饰：无；
}

错误是,

锚里什么也没有
#不是彩色的（在css中）
)；不在java脚本中使用

，

在脚本块中，

文档.layers

，

文档.all

。。？10年前，这些技术是现代的。同样，以那种方式使用

eval

也很可怕。而不是执行

var doc=“document”；评估（单据+“+动态+”项=“+属性），使用文档[dynamic+'item']=property。为了方便起见，我更改了图像src，您必须将其放回原处