• 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上测试通过!

  • 相关阅读:
    PHP 支付类库, cURL开源HTTP类库
    sublime text3 批量查找替换文件夹或项目中的字符
    php 腾讯云 对象存储V5版本 获取返回的上传文件的链接方法
    Redis Desktop Manager 利用ssh连接 Redis
    一键PHP/JAVA安装工具 OneinStack
    函数之局部变量和使用global语句
    函数之定义形参
    函数之定义函数
    大数据入门第二十天——scala入门(二)scala基础02
    大数据入门第二十天——scala入门(二)scala基础01
  • 原文地址:https://www.cnblogs.com/challengesoflife/p/2827956.html
Copyright © 2020-2023  润新知