用Jquery自己开发个代阴影的对话框吧!-阿里云开发者社区

开发者社区> mcy247> 正文

用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" });
 本文转自博客园张占岭(仓储大叔)的博客,原文链接:用Jquery自己开发个代阴影的对话框吧!,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】
  《Web 前端开发精华文章推荐》2013年第六期(总第十八期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。
1790 0
14 个使用 jQuery 开发的模拟、数字时钟
1. CoolClock in jQuery CoolClock 是一个可定制的 jQuery 模拟时钟,使用 SVG 绘制,提供多种外观选择,同时支持数字时钟。 Read More Demo 2.Analog JQuery clock 在该教程中,通过使用 jQuery 和一个名为 jQueryRotata 插件绘制一个模拟时钟。
799 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3951 0
后端开发必备JQuery常用知识点
function getReportID2NameMap() { var cache; $.ajax({ type: 'GET', url: "GetNodeId2NameMap",//请求接口 async: false,//发送同步请求,请将此选项设置为 false。
929 0
JQUERY弹层|图片滚动|插件开发|上传 相关收藏
整理了一下浏览器收藏夹里的东西,发现好多连接都死掉了 JQUERY API : 1.11.2 http://jquery.cuishifeng.cn/ 1.10-1.20 http://www.css88.com/jqapi-1.9/ jQuery图片滚动十佳插件重点介绍 Jquery图片滚动,幻灯片 11个最佳jQuery滚动条插件 弹出层http://aui.gi
1339 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5663 0
jQuery:收集一些基于jQuery框架开发的控件/jquery插件
Coda Popup Bubbles采用jQuery开发,类似“冒泡”效果的提醒弹出框。主页:http://jqueryfordesigners.com/coda-popup-bubbles/ 下载:http://jqueryfordesigners.
1004 0
《jQuery EasyUI开发指南》——1.8 搭建SSH开发框架
工欲善其事,必先利其器。在Java Web开发中,之所以采用MyEclipse,并且采用最流行的MVC架构来开发,就是因为MyEclipse的扩展性。它可以说是无限扩展的,需要什么就安装什么,这些来自第三方的插件,可以非常方便地为项目服务,提供强大的功能。
1405 0
+关注
mcy247
做自己的太阳 无需凭借谁的光
979
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载