artDialog open IE6 兼容问题解决
artDialog 是一款超好用的弹出层插件!下载地址
在开发的过程中使用 art.dialog.open("",{});时发现在IE6中无法弹出新页面的内容
出错代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %> <!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 runat="server"> <title></title> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery.artDialog.source.js?skin=black" type="text/javascript"></script> <script src="js/iframeTools.js" type="text/javascript"></script> <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script type="text/javascript"> function ShowFocusRoom() { art.dialog.open('Demo2.aspx', { width: '100%', height: '100%', top: '0px', title: '测试页面' }, false); } function ShowHtml() { art.dialog.open('demo.htm', { width: '100%', height: '100%', top: '0px', title: '静态页面' }, false); } </script> <!–[if IE 6]> <script> DD_belatedPNG.fix('.big .item a img,.big .item a:hover'); </script> <link href="css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div class="big"> <div class="item"><a href="javascript:;" onclick="ShowFocusRoom()"><img src="images/2.png" /></a></div> <div class="item"><a href="javascript:;" onclick="ShowFocusRoom()"><img src="images/3.png" /></a></div> <div class="item"><a href="javascript:;" onclick="ShowHtml()"><img src="images/4.png" /></a></div> <div class="item"><a href="javascript:;" onclick="ShowHtml()"><img src="images/5.png" /></a></div> <div style=" clear:both;"></div> </div> </form> </body> </html>
上面的代码在Chrome 中执行完全没有问题,很漂亮。但是再到 IE6(系统环境:win2003 IE6) 上运行是,弹出层的页面一直停在 loading 状态!
原来错在:
<a href="javascript:;" onclick="ShowFocusRoom()"><img src="images/2.png" /></a> 的 A 标签上的 href="javascript:;" 上;
修改后的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %> <!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 runat="server"> <title></title> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery.artDialog.source.js?skin=black" type="text/javascript"></script> <script src="js/iframeTools.js" type="text/javascript"></script> <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script type="text/javascript"> function ShowFocusRoom() { art.dialog.open('Demo2.aspx', { width: '100%', height: '100%', top: '0px', title: '测试页面' }, false); } function ShowHtml() { art.dialog.open('demo.htm', { width: '100%', height: '100%', top: '0px', title: '静态页面' }, false); } </script> <!–[if IE 6]> <script> DD_belatedPNG.fix('.big .item a img,.big .item a:hover'); </script> <link href="css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div class="big"> <div class="item"><a href="#" onclick="ShowFocusRoom(); return false;"><img src="images/2.png" /></a></div> <div class="item"><a href="#" onclick="ShowFocusRoom(); return false;"><img src="images/3.png" /></a></div> <div class="item"><a href="#" onclick="ShowHtml(); return false;"><img src="images/4.png" /></a></div> <div class="item"><a href="#" onclick="ShowHtml(); return false;"><img src="images/5.png" /></a></div> <div style=" clear:both;"></div> </div> </form> </body> </html>
再在IE6上测试通过!