zoukankan      html  css  js  c++  java
  • 弹出框

    //filter: alpha(opacity=50);IE滤镜
    //opacity: 0.2;非IE滤镜
    var dlg = {
        element: function () {
            this._strTit = "标题";
            this._strCon = "内容";
            this._width = 350;
            this._height = 200;
            this._obj = $('<div class="dlg_box">');
            this._title = $('<h1 class="dlg_title"></h1>');
            this._content = $('<div class="dlg_content"></div>');
            this._txt = $('<span class="dlg_txt">确定删除该相册?该相册中有15张相片</span>');
            this._bottom = $('<div class="dlg_bottom"></div>');
            this._mask = $('<div style="position:fixed; _position:absolute; display:none; top:0px; left:0px; _top:expression(eval(document.documentElement.scrollTop)); _left:expression(eval(document.documentElement.scrollLeft)); background:#000; z-index:999; filter:alpha(opacity=20); opacity:0.2; 100%;" id="mask"><iframe scrolling="no" style="filter:alpha(opacity=0); opacity:0; 100%; height:100%; display:none; *display:block; " ></iframe></div>');
            this.fn1 = function () { };
            this.fn2 = function () { };
        },
        icon: function (cla) {
            return $('<i></i>').attr("class", cla);
        },
        btn: function (obj, mask, cla, txt, fn, g) {
            return $('<a href="javascript:;"></a>').attr({ "class": cla, "txt": txt }).html(txt).on("click", function () { fn(); if (g == true) { } });
        },
        Box: {
            Inf: function (id, title, content, width, fn1, fn2) {
                var e = new dlg.element();
                $.extend(e, { _strTit: title, _strCon: content, _ width, fn1: fn1, fn2: fn2 });
                e._title.html(title);
                e._content.html(content);
                e._obj.append(e._title).append(e._content).attr("id", id);
                e._obj.append(dlg.btn(e._obj, e._mask, "close", "关闭", e.fn2, true));
                e._bottom.append(dlg.btn(e._obj, e._mask, "btn_yes", "确定", e.fn1, true));
                e._bottom.append(dlg.btn(e._obj, e._mask, "btn_no", "取消", e.fn2, true));
                e._obj.append(e._bottom);
                e._obj.css({ "width": e._width, "height": e._height });
                e._mask.attr("id", id + "Mask");
                this.ply(e._obj, e._mask);
                this.drgn(e._obj, e._title);
            },
            ply: function (obj, mask) {
                $("body").append(mask).append(obj);
                mask.height($(window).height());
                var t = ($(window).height() - obj.height()) / 2; //设top为变量X 得到公式:2X+ $(obj).height()=$(window).height()=>x=($(window).height()-$(obj).height())/2
                var l = ($(window).width() - obj.width()) / 2;
                obj.attr("style", 'position:absolute;z-index:1000;');
                obj.css({ "top": t, "left": l });
                obj.show();
                mask.show();
                //绑定窗口改变事件
                $(window).bind("resize", function () {
                    var t = ($(window).height() - obj.height()) / 2;
                    var l = ($(window).width() - obj.width()) / 2;
                    obj.css({ "top": t, "left": l });
                    mask.css({ "height": $(window).height(), "width": $(window).width() });
                })
            },
            drgn: function (obj, head) {
                var moveObj = $("<div class='dlg_dashed'></div>");
                var d_x, d_y = 0;
                head.on("mousedown", function (e) {
                    moveObj.css({ "width": obj.width(), "height": obj.height(), "left": obj.offset().left, "top": obj.offset().top, "position": "absolute" });
                    moveObj.appendTo("body");
                    e = e || window.event;
                    d_x = e.clientX - obj.offset().left; //光标距离弹出框左边距距离
                    d_y = e.clientY - obj.offset().top;  //光标距离弹出框上边距距离
                    if (document.body.setCapture) {
                        document.body.onmousemove = move;
                        document.body.onmouseup = end;
                        document.body.setCapture();
                    } else {
                        document.addEventListener("mousemove", move, false);
                        document.addEventListener("mouseup", end, false)
                    }
                });
                var move = function (e) {
                    e = e || window.event;
                    var l = e.clientX - d_x;
                    var t = e.clientY - d_y;
                    moveObj.css({ "left": l + "px", "top": t + "px" });
                };
                var end = function (e) {
                    moveObj.remove();
                    if (document.body.setCapture) {
                        document.body.onmousemove = null;
                        document.body.onmouseup = null;
                        document.body.releaseCapture();
                    }
                    obj.css({ "left": moveObj.css("left"), "top": moveObj.css("top") });
                    document.removeEventListener("mousemove", move, false);
                    document.removeEventListener("mouseup", move, false);
                }
            },
            Close: function (id, fn1) {
                $(window).unbind("resize");
                $("#" + id).remove();
                $("#" + id + "Mask").remove();
            }
        },
        Msg: {
            Inf: function () {
                
            },
            Err: function () {
                
            }
        }
    };
    <!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>
        <title></title>
        <link href="dl1g.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .dlg_box a.close, .btn_yes, .btn_no, .dlg_box a.close, .btn_yes, .btn_no, .dlg_box .ico_ques
            {
                background: url(image/pop_bg.png) no-repeat;
                display: inline-block;
                vertical-align: middle;
                overflow: hidden;
            }
            /**/
            .dlg_box
            {
                border: solid 3px #aaa;
                position: absolute;
                background-color: White;
                left: 0px;
                top: 0px;
                z-index: 999;
                overflow: hidden;
                width: 350px;
            }
            /*标题*/
            .dlg_box .dlg_title
            {
                background-color: #E0E0E0;
                font-size: 14px;
                font-weight: bold;
                padding: 0px 0px 0px 10px;
                height: 30px;
                line-height: 30px;
                border-top: white solid 1px;
                border-bottom: #BBBBBB solid 1px;
                margin: 0px 0px 0px 0px;
                cursor: move;
            }
            /**内容**/
            .dlg_box .dlg_content
            {
                margin: 10px 20px;
                min-height: 40px;
                line-height: 20px;
                font-weight: bold;
                color: #404040;
                font-size: 14px;
            }
            
            /**图标**/
            .dlg_box .ico_ques
            {
                background-position: -50px -60px;
                width: 25px;
                height: 25px;
                margin-right: 10px;
            }
            /**按钮**/
            .dlg_box .dlg_bottom
            {
                height: 30px;
                text-align: center;
                margin-bottom: 20px;
            }
            .btn_yes, .btn_no
            {
                text-decoration: none;
                width: 79px;
                height: 30px;
                line-height: 30px;
                color: white;
                font-weight: bold;
            }
            .btn_no
            {
                background-position: -79px 0px;
                margin-left: 25px;
                color: #404040;
            }
            .btn_yes:hover
            {
                background-position: 0px -30px;
            }
            .btn_no:hover
            {
                background-position: -79px -30px;
            }
            .dlg_box a.close
            {
                height: 24px;
                width: 24px;
                background-position: -158px 0;
                display: block;
                position: absolute;
                top: 3px;
                right: 3px;
                text-indent: -1000px;
            }
            .dlg_box a.close:hover
            {
                background-position: -158px -24px;
            }
            .dlg_dashed
            {
                border: dashed 3px #AAAAAA;
                background: #fff;
                z-index: 1005;
                filter: alpha(opacity=50);
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <!-- <div class="dlg_box" style="top: 10.5px; left: 499.5px; display: block;">
            <h1 class="dlg_title">
                删除相册
            </h1>
            <div class="dlg_content">
                <i class="ico_ques"></i><span class="dlg_txt">确定删除该相册?该相册中有15张相片</span>
            </div>
            <div class="dlg_bottom">
                <a href="javascript:;" class="btn_yes" title="确定">确定</a><a href="javascript:;" class="btn_no"
                    title="取消">取消</a>
            </div>
            <a href="javascript:;" class="close" title="关闭">关闭</a>
        </div>-->
        <a id="btndlg" href="javascript:;">弹出</a>
        <div id="lg">
        </div>
    </body>
    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../js/jone.js" type="text/javascript"></script>
    <script src="dlg.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#btndlg").bind("click", function () {
            dlg.Box.Inf("box1", "", '', 350,
          function () { },
          function () { dlg.Box.Close("box1", function () { }); });
        });
        
    </script>
    </html>
  • 相关阅读:
    nginx配置https访问
    nginx解决带_的head内容丢失
    软件开发报价的计算方法(转载)
    使用游标批量初始化密码
    调用WScript.Shell时产生Automation 服务器不能创建对象的错误
    用.NET SqlBulkCopy类执行批量插入数据到数据库
    XML文件做数据源的读取使用
    页面实现数据库备份(还原)实例
    特定的ExcelCSS样式Excel导出
    索引的初步学习总结
  • 原文地址:https://www.cnblogs.com/wzq806341010/p/3629638.html
Copyright © 2011-2022 走看看