zoukankan      html  css  js  c++  java
  • 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上测试通过!

  • 相关阅读:
    【前端优化之拆分CSS】前端三剑客的分分合合
    ipad&mobile通用webapp框架前哨战
    如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子
    关于前端框架升级与全站样式替换的简单建议
    【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
    【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件
    【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
    【HTML5&CSS3进阶学习01】气泡组件的实现
    【模块化编程】理解requireJS-实现一个简单的模块加载器
    【小贴士】探一探javascript中的replace
  • 原文地址:https://www.cnblogs.com/challengesoflife/p/2827956.html
Copyright © 2011-2022 走看看