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:;" οnclick="ShowFocusRoom()"><img src="images/2.png" /></a></div> <div class="item"><a href="javascript:;" οnclick="ShowFocusRoom()"><img src="images/3.png" /></a></div> <div class="item"><a href="javascript:;" οnclick="ShowHtml()"><img src="images/4.png" /></a></div> <div class="item"><a href="javascript:;" οnclick="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:;" οnclick="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="#" οnclick="ShowFocusRoom(); return false;"><img src="images/2.png" /></a></div>
<div class="item"><a href="#" οnclick="ShowFocusRoom(); return false;"><img src="images/3.png" /></a></div>
<div class="item"><a href="#" οnclick="ShowHtml(); return false;"><img src="images/4.png" /></a></div>
<div class="item"><a href="#" οnclick="ShowHtml(); return false;"><img src="images/5.png" /></a></div>
<div style=" clear:both;"></div>
</div>
</form>
</body>
</html>
再在IE6上测试通过!