弹出框-CSDN博客

代码存档，网络上有好多插件可以实现弹出框的功能，而且都已经很完善了。但还是喜欢自己动手写一下，虽然花了一点时间但是我觉的还是有收获的了。

1.效果图

代码:

2.html代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style> 
    <!--javascript代码块-->
</head>
<body>
    <input type="button" value="默认测试" id="test1" />
    <input type="button" value="自定义测试" id="test2" />
</body>
</html>

3.javascript代码

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var huidiao;
        $(function () {
            //测试代码
            huidiao = a;
            $("#test1").click(function () {
                showDialog(null, null, null);
            });

            $("#test2").click(function () {
                var style = {
                    width: 500,
                    height: 400,
                    bordercolor: "blue",
                    borderwidth: "2px",
                    titlename: "自定义测试",
                    titlebgcolor: "green"
                };

                var iframe = $("<iframe src='http://www.cnblogs.com/'></iframe>");
                iframe.css({
                    "width": "99%",
                    "height": "99%"
                });
                showDialog(style, iframe, huidiao);
            });
        })

        function a() {
            alert("回调函数测试");
        }

        /*
        *弹出框
        *参数:
        *diastyle:{
        *   width:300,
        *   height:600,
        *   bordercolor:'black',
        *   borderwidth:'1px',
        *   borderstyle:'solid',
        *   titlename:'标题',
        *   titlebgcolor:'black',
        *   titlefgcolor:'white'
        *}
        *content 弹出框包含内容
        *callback 回调函数
        */
        function showDialog(diastyle, content, callback) {
            if (!diastyle) {
                diastyle = {};
            }

            var style = {
                width: diastyle.width || 600,
                height: diastyle.height || 400,
                bordercolor: diastyle.bordercolor || 'black',
                borderwidth: diastyle.borderwidth || '1px',
                borderstyle: diastyle.borderstyle || 'solid',
                titlename: diastyle.titlename || '标题',
                titlebgcolor: diastyle.titlebgcolor || 'black',
                titlefgcolor: diastyle.titlefgcolor || 'white'
            };

            //弹出窗口
            var diadiv = $("<div id='diadiv'></div>");
            diadiv.css({
                "display": "none",
                "position": "absolute",
                "background-color": "white",
                "top": "50%",
                "left": "50%",
                "margin-top": "-" + style.height / 2 + "px",
                "margin-left": "-" + style.width / 2 + "px",
                "width": style.width,
                "height": style.height,
                "border": style.borderwidth + " " + style.borderstyle + " " + style.bordercolor,
                "border-radius": "5px",
                "box-shadow": "0px 0px 20px #888888",
                "z-index": "10000"
            });

            //标题栏
            var diatitle = $("<div id='diatitle'></div>")
            diatitle.css({
                "color": style.titlefgcolor,
                "font-style": "微软雅黑",
                "background-color": style.titlebgcolor,
                "position": "absolute",
                "top": "0px",
                "left": "0px",
                "width": "100%",
                "height": "25px"
            });

            //鼠标移动弹出框
            press = false;
            var offleft = null;  //鼠标按下的位置与dialog的x相差
            var offtop = null;   //鼠标按下的位置与dialog的y相差

            diatitle.mousedown(function () {
                press = true;
                $(this).css("cursor", "move");
                diadiv.css("z-index", "10002");
                offleft = event.clientX - diadiv.get(0).offsetLeft;
                offtop = event.clientY - diadiv.get(0).offsetTop;
            })

            window.onmouseup = function () {
                press = false;
            };

            window.onmousemove = function () {
                if (press) {
                    diadiv.css("left", (event.clientX - offleft + style.width / 2) + "px");
                    diadiv.css("top", (event.clientY - offtop + style.height / 2) + "px");
                }
            }

            //标题名称
            var diatitlename = $("<span id='titlefont'>" + style.titlename + "</span>")
            diatitlename.css({
                "position": "absolute",
                "display": "inline-block",
                "padding": "3px",
                "left": "3px",
            });
            diatitle.append(diatitlename);

            //关闭按钮
            var diaclose = $("<span id='colsespan'>x</span>");
            diaclose.css({
                "position": "absolute",
                "display": "inline-block",
                "padding": "3px",
                "right": "3px"
            });

            //关闭按钮 鼠标经过和关闭弹出框
            diaclose.hover(function () {
                $(this).css({ "cursor": "pointer", "color": "red" });
            }, function () {
                $(this).css({ "cursor": "default", "color": "white" });
            }).click(function () {
                diabg.fadeOut(500);
                diadiv.fadeOut(500, function () {
                    if (callback != null) {
                        callback();
                    }
                    $(this).remove();
                    diatitle.remove();
                    diadiv.remove();
                    diabg.remove();
                });
            });
            diatitle.append(diaclose);
            diadiv.append(diatitle);

            //添加弹出框包含内容div
            var diacontentdiv = $("<div id='diacontentdiv'></div>");
            diacontentdiv.css({
                "position": "absolute",
                "top": diatitle.height() + "px",
                "left": "0px",
                "height": (diadiv.height() - diatitle.height()) + "px",
                "width": "100%",
                "border-radius": "0px 0px 5px 5px",
                "over-flow": "auto"
            });
            if (content) {
                diacontentdiv.append(content);
            }

            diadiv.append(diacontentdiv);

            //添加背景遮罩
            var diabg = $("<div id='diabg'></div>");
            debugger;
            diabg.css({
                "position": "absolute",
                "background-color": "#cccccc",
                "top": "0px",
                "left": "0px",
                "z-index": "9999",
                "width": window.document.body.scrollWidth,
                "height": window.document.body.scrollHeight,
                "opacity": "0.6"
            });

            //遮罩长宽调整
            window.onresize = function () {
                diabg.css({
                    "width": window.document.body.scrollWidth,
                    "height": window.document.body.scrollHeight
                });
            }

            //添加到页面
            $(document.body).append(diabg.fadeIn(400)).append(diadiv.fadeIn(500));
        }
    </script>