使用javascript的模态窗口

我在html和css中为我的页面添加了以下脚本，为我的图像创建一个模态框，以便在打开每个图像时使它看起来更专业一些，允许您滚动通过他们几次没有打开/ clsoing窗口。使用javascript的模态窗口

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

当我执行这些代码和脚本没有任何反应，图像甚至不出现在页面中。

来源

2012-02-25 Johnny Hankgard

''脚本块，'document.layers'，'document.all'中有''，''..？这些技术在10年前是现代的。另外，以这种方式使用'eval'是非常可怕的。而不是做'var doc =“document”; eval（doc +“。”+ dynamic +“item =”+ property）;'，使用'document [dynamic +'item'] = property;'。 – 2012-02-25 14:37:40

它在ie中工作。但不是在铬，歌剧和火狐狸

<!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脚本中没有使用

来源

2012-03-03 08:47:38

为了方便，我改变了图像的src，你必须把它放回去 – 2012-03-03 08:50:10

使用javascript的模态窗口

回答

相关问题