JQuery 模式窗口插件

 

 

jQuery的模式窗口插件网上有很多，但都有大大小小的问题。始终不能满足我的需求。

前几天在园子里看到  [原创]仿QQ校友DIV模拟窗口 这篇文章

今天闲来无事，把文章中插件的 html 和 css 拿了过来 自己也写了一个插件。

很久没写插件了，就当温习了。写的代码真是太丑了。。

------------------------------------------------------------------------------

先来点效果图

 

 

---------------------------------------------------------------------------------

代码

 

/**
*jQuery弹出层插件
*
*汤晓华 tension 
*
*2010/02/27 http://www.cnblogs.com/tandly
*
*本插件html代码以及css部分来自  http://www.cnblogs.com/fishbin/archive/2010/03/21/1690759.html
*
*
*/


(function($) {
    $.fn.box = function(o) {
        o = $.extend(
        {
            title: "意见反馈",
            trigger: "",
            parent: "none",
            width: -1990,
            height: -1990,
            removeBtn: false,
            buttons: [],
            //            buttons: [{ title: "确认", cssClass: "jBox-confirm", click: function(obj) {

            //            }
            //            }, { title: "取消", cssClass: "jBox-confirm", click: function(obj) {

            //            } }],
            ok: function() { },
            cancel: function() { },
            close: function() { }
        }, o || {});

        $(this).attr("box_content", "true");

        var width = o.width;
        var height = o.height;



        //弹出框的父容器
        var parent;
        var thisD = $(this);
        if (o.parent == "none") {
            parent = $($("div")[0]);

            if (parent == null || parent.attr("box_content") == "true") {
                parent = $("body");
            }
        }
        else {
            parent = $(o.parent);
        }


        /*以下是固定的HTML代码*/

        var jBoxHolder = $('<div id="jBoxHolder"></div>');
        var mask = $('<div class="mask" style="width:0px;height:0px;display: none;"></div>');
        mask.appendTo(jBoxHolder);
        var jBoxWraper = $('<div class="jBox-wraper" style="z-index: 1100; width: ' + width + 'px; visibility: hidden;"></div>');
        var jBox = $('<div id="jBoxID" class="jBox"></div>');
        var jBoxHandler = $('<div class="jBox-handler"></div>');
        var jBoxHandlerTitle = $('<h3>' + o.title + '</h3>');
        var jBoxHandlerClose = $('<input type="button" class="jBox-close" title="关闭"/>');
        var jBoxContent = $('<div class="jBox-content" style="height: ' + height + 'px; overflow: hidden"></div>');
        var jBoxStatus = $('<div class="jBox-status"></div>');

        var jBoxConfirm = $('<input type="button" class="jBox-confirm" title="确认" value="确认"/>');
        var jBoxCancel = $(' <input type="button" class="jBox-confirm" title="取消" value="取消"/>');


        jBoxWraper.close = function() {
            jBoxWraper.css("visibility", "hidden");
            mask.hide();
        }

        jBoxWraper.open = function() {
            jBoxWraper.css("visibility", "visible");
            jBoxWraper.cover();
            mask.show();
        }

        //追加标题和关闭按钮到 jBoxHandlerTitle '<div class="jBox-handler"></div>
        jBoxHandlerTitle.appendTo(jBoxHandler);

        jBoxHandlerClose.click(function() {
            jBoxWraper.close();
            o.close(this, jBoxWraper);
        });

        jBoxHandlerClose.appendTo(jBoxHandler);

        //头部追加到 jBox <div id="jBoxID" class="jBox"></div>
        jBoxHandler.appendTo(jBox);

        //当前对象  $(this) 设置为显示并追加到 jBox <div id="jBoxID" class="jBox"></div>
        $(this).css("display", "block").appendTo(jBoxContent);

        //内容追加到 jBox <div id="jBoxID" class="jBox"></div>
        jBoxContent.appendTo(jBox);


        if (!o.removeBtn) {

            jBoxConfirm.click(function() {
                o.ok(this, jBoxWraper);
            });


            jBoxCancel.click(function() {
                var flag = o.cancel(this, jBoxWraper);
                flag = (typeof flag) == 'undefined' ? true : flag

                if (flag) {
                    jBoxWraper.close();
                }
            });


            //按钮追加到jBoxStatus '<div class="jBox-status"></div>
            jBoxConfirm.appendTo(jBoxStatus);
            jBoxCancel.appendTo(jBoxStatus);
        }

        for (var i = 0; i < o.buttons.length; i++) {
            var btn = o.buttons[i];
            var mybtn = $(' <input type="button" class="' + btn.cssClass + '" id="myBtn_' + i + '" title="' + btn.title + '" value="' + btn.title + '"/>');
            mybtn.appendTo(jBoxStatus);
            mybtn.click(function() {
                var id = $(this).attr("id").split('_')[1];
                o.buttons[id].click(mybtn, jBoxWraper);
            });

        }

        //底部状态栏目追加到 jBox <div id="jBoxID" class="jBox"></div>
        jBoxStatus.appendTo(jBox);

        //jBox追加到 jBoxWraper
        jBox.appendTo(jBoxWraper);

        jBoxWraper.appendTo(jBoxHolder);

        parent.append(jBoxHolder);

        var left = $(window).width() / 2 - jBoxWraper.width() / 2;
        var top = $(window).height() / 2 - jBoxWraper.height() / 2;

        jBoxWraper.css({ left: left, top: top });


        jBoxWraper.cover = function() {
            var doc = $(document);
            var w = doc.width();
            var h = doc.height();
            mask.css({ width: w, height: h });
        }



        jBoxWraper.resize = function() {


            var doc = $(document);
            left = $(window).width() / 2 - jBoxWraper.width() / 2;
            top = $(window).height() / 2 - jBoxWraper.height() / 2;

            left += doc.scrollLeft();
            top += +doc.scrollTop();

            // jBoxWraper.css({ left: left, top: top });

            jBoxWraper.animate({ left: left, top: top }, 300)

            jBoxWraper.cover();
        }



        $(window).resize(function() {
            jBoxWraper.resize();
        });


        var onFooEndFunc = function(fn) {
            var delay = 100; // 根据实际情况可调整延时时间
            var executionTimer;
            return function() {
                if (!!executionTimer) {
                    clearTimeout(executionTimer);
                }
                //这里延时执行你的函数
                executionTimer = setTimeout(function() {
                    fn();
                }, delay);
            };
        };

        var myfn = function() {
            $(window).resize();
        }

        window.onscroll = onFooEndFunc(myfn);

        $(o.trigger).click(function() {
            jBoxWraper.open();
        });
    };
})(jQuery);

 

 

 

 DEMO

 https://files.cnblogs.com/tandly/jquery.box.rar

苏州    多云

汤晓华 QQ 1881597 MSN tension1990@hotmail.com

2010 03 27