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', {
                 '100%',
                height: '100%',
                top: '0px',
                title: '测试页面'
            }, false);
        }

        function ShowHtml() {
            art.dialog.open('demo.htm', {
                 '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', {
                 '100%',
                height: '100%',
                top: '0px',
                title: '测试页面'
            }, false);
        }

        function ShowHtml() {
            art.dialog.open('demo.htm', {
                 '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上测试通过!

原文地址:https://www.cnblogs.com/challengesoflife/p/2827956.html