技术员博客      html  css  js  c++  java
  • 用Jquery自己开发个代阴影的对话框吧!

    <script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $("#open").click(function() {
    openDialog(a1); //调用,直接写上DIV的ID即可
    });
    });
    var openDialog = function(o) {
    var dialog = new zzlDialog(o);
    dialog.open();
    }
    var zzlDialog = function(o) {
    this.init = function() {
    /* 对话框初始化 */
    var XBox = '\
    <div id="mask"/>\
    <div id="wai">\
    </div>\
    <div id="nie">\
    <table>\
    <thead>\
    <tr>\
    <td>\
    阴影弹出框\
    </td>\
    <td>\
    </td>\
    </tr>\
    </thead>\
    <tbody>\
    <tr>\
    <td colspan="2">' + $(o).html() + '\
    </td>\
    </tr>\
    </tbody>\
    </table>\
    </div>\
    ';
    $(document.body).append(XBox);
    };

    this.cssInit = function() {
    /* css初始化 */
    $("#wai").css({ "padding": "10px", "background": "#000", "filter": "Alpha(Opacity='50')", "position": "absolute" });
    $("#nie").css({ "position": "absolute", "z-index": "1000" });
    $("#nie>table").css({ "border": "1px solid rgb(55,119,188)", "border-collapse": "collapse", "background": "#fff" });
    $("#nie>table>thead>tr").css({ "background": "rgb(0,94,172)", "color": "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" });
    $("#nie>table").find("td").css({ "padding": "5"});
    /* 内部主体定位 */
    $("#nie").css({ "top": "50px" });
    $("#nie").css({ "left": "50px" });
    /* 关闭按钮 */
    var $close = $("#nie>table>thead").find("td").next("td");
    $close.html("<span>关闭</span>");
    $close.css({ "text-align": "right", "padding-right": "5px" });
    $close.find("span").css({ "font-weight": "normal", "cursor": "hand" });
    $close.find("span").click(function() { new zzlDialog().closes(); });
    /* 外部阴影添加 ,及位置和大小由内部内容来控制 */
    $("#wai").css({ "width": ($("#nie>table").width() + 16) + "px", "height": ($("#nie>table").height() + 16) + "px" });
    $("#wai").css({ "top": $("#nie").position().top - 8 + "px", "left": $("#nie").position().left - 8 + "px", "z-index": $("#nie").css("z-index") });
    // $("#wai").corner("5px"); //圆角
    };
    this.open = function() {
    this.init();
    this.cssInit();
    this.shadow();
    };
    this.shadow = function() {
    this.event_b_show();
    if (window.attachEvent) {
    window.attachEvent('onresize', this.event_b);
    window.attachEvent('onscroll', this.event_b);
    }
    else {
    window.addEventListener('resize', this.event_b, false);
    window.addEventListener('scroll', this.event_b, false);
    }
    };

    this.event_b = function() {
    var oShadow = $('#mask');
    if (oShadow.css("display") != "none") {
    if (this.event_b_show) {
    this.event_b_show();
    }
    }
    };
    this.closes = function() {
    var oShadow = $('#mask');
    oShadow.css({ 'display': 'none' });
    $("#wai").remove();
    $("#nie").remove();
    };
    this.event_b_show = function() {
    var oShadow = $('#mask');
    oShadow.css({ 'position': 'absolute', 'display': '', 'opacity': '0.1', 'filter': 'alpha(opacity=10)', 'background': '#000' });
    var sClientWidth = parent ? parent.document.body.offsetWidth : document.body.offsetWidth;
    var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight;
    var sScrollTop = parent ? (parent.document.body.scrollTop + parent.document.documentElement.scrollTop) : (document.body.scrollTop + document.documentElement.scrollTop);
    oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth + "px", 'height': (sClientHeight + sScrollTop) + "px" });


    }
    }
    </script>

  • 相关阅读:
    J2EE 的 基本概念
    linux ssize_t与size_t
    WebService Howto 规格严格
    jquery 遍历对象、数组、集合_项海军_新浪博客
    Bluetooth architecture (HCI/L2CAP)
    2013年4月19日佳都新太笔试题+解答
    javascript效率:加入range技巧
    [置顶] 通过JavaScript脚本来实现网页视频聊天室的快速制作
    网络游戏
    Android音乐播放器
  • 原文地址:https://www.cnblogs.com/lori/p/2051235.html
Copyright © 2011-2022 技术员博客