dialog获取焦点

标签：style   io   os   ar   for   div   sp   2014   art   

弹出层是一个iframe

openWindow: function (options) {
            var url = options.url;
            url += url.indexOf("?") > 0 ? "&" : "?";
            url += "ran=" + Math.random();
            var isScroll = options.isScroll ? ‘yes‘ : ‘no‘;
            rcpnDetail.mainWindow = $("<div></div>");
            rcpnDetail.mainWindow.html(‘<iframe frameborder="0" width="100%" scrolling="‘ + isScroll + ‘" height="‘ + options.height + ‘" src="‘ + url + ‘"></iframe>‘)
                .dialog({
                    width: options.width,
                    title: options.title,
                    name: options.name,
                    isDraggable: true,
                    afterClose: options.afterClose
                });
        }

调用自定义jquery.dialog.js

(function($) {
    $.fn.dialog = function(options) {
        if (this.length == 0) return null;
        var method = typeof arguments[0] == "string" && arguments[0];
        var args = method && Array.prototype.slice.call(arguments, 1) || arguments;
        return this.each(function() {
            var context = $(this).data("dialog");
            if (!context) {
                context = new $.dialog(this, options);
                $(this).data(‘dialog‘, context);
            }
            if (method) context[method].apply(context, args);
            else context.show();
        });
    };

    $.dialog = function(control, options) {
        var context = this;
        var options = $.extend({}, $.fn.dialog.defaults, options);
        options.isCreateId = options.isCreateId ? options.isCreateId : ‘dialog-‘ + $.dialog.__count; // 唯一ID
        var overlayId = options.isCreateId + ‘-overlay‘; // 遮罩层ID
        var isShow = false;
        var isIe = $.browser.msie;
        this.isDynamic = $(control).parent().length == 0;
        var returnValue = null; //关闭窗体返回值
        var barHtml = !options.isShowTitle ? ‘‘ : [
            ‘<div class="bar">‘,
            ‘<span class="title">‘ + options.title + ‘</span>‘,
            ‘<a class="close"><i class="fa fa-times"></i>‘ + options.closeText + ‘</a>‘,
            ‘<div class="clear"></div>‘,
            ‘</div>‘
        ].join(‘‘);

        var content = $(‘<div class="content"></div>‘).append($(control).show());
        var dialog = $(‘<div id="‘ + options.isCreateId + ‘" name="‘ + (options.name ? options.name : options.isCreateId) + ‘" class="dialog" style="display:none"></div>‘).css(‘width‘, options.width).append(barHtml).append(content);
        $(‘body‘).append(dialog);

        var resetPos = function() {
            if (options.isCenter) {
                var left = ($(window).width() - dialog.width()) / 2;
                var top = ($(window).height() - dialog.height()) / 2;
                if (top < 0) {
                    top = 10;
                }
                dialog.css({ top: top + $(document).scrollTop(), left: left + $(document).scrollLeft() });
            }

            if (options.isNearTrigger) {
                var postion = { t: 0, l: 0, w: 0, h: 0 };
                if (options.triggerElement) {
                    var offsetElement = $(options.triggerElement).offset();
                    postion = {
                        t: offsetElement.top,
                        l: offsetElement.left,
                        w: $(options.triggerElement).outerWidth(),
                        h: $(options.triggerElement).outerHeight()
                    };
                }

                if ($.isFunction(options.triggerPosition)) {
                    options.triggerPosition.call(context, dialog, postion);
                } else {
                    dialog.css({ left: postion.l + postion.w, top: postion.t });
                }
            }
        }


        var init = function() {
            /* 是否需要初始化背景遮罩层 */
            if (options.isModal) {
                $(‘body‘).append(‘<div id="‘ + overlayId + ‘" class="dialog-overlay"></div>‘);
                $(‘#‘ + overlayId).css({
                    ‘left‘: 0,
                    ‘top‘: 0,
                    ‘width‘: ‘100%‘,
                    ‘height‘: $(document).height(),
                    ‘z-index‘: ++$.dialog.__zindex,
                    ‘position‘: ‘absolute‘
                }).hide();
            }

            dialog.css({
                ‘z-index‘: ++$.dialog.__zindex,
                ‘position‘: options.isFixed ? ‘fixed‘ : ‘absolute‘
            });

            /* 以下代码处理框体是否可以移动 */
            var mouse = { x: 0, y: 0 };

            function moveDialog(event) {
                var e = window.event || event;
                var top = parseInt(dialog.css(‘top‘)) + (e.clientY - mouse.y);
                var left = parseInt(dialog.css(‘left‘)) + (e.clientX - mouse.x);
                dialog.css({ top: top, left: left });
                mouse.x = e.clientX;
                mouse.y = e.clientY;
            };

            dialog.find(‘.bar‘).mousedown(function(event) {
                if (!options.isDraggable) {
                    return;

                }
                var e = window.event || event;
                mouse.x = e.clientX;
                mouse.y = e.clientY;
                $(document).bind(‘mousemove‘, moveDialog);
            });

            $(document).mouseup(function(event) {
                $(document).unbind(‘mousemove‘, moveDialog);
            });

            /* 绑定一些相关事件。 */
            dialog.find(‘.close‘).bind(‘click‘, function() {
                if (!isShow) return;
                if (context.isDynamic) context.close();
                else context.hide();
            });
            dialog.bind(‘mousedown‘, function() {
                dialog.css(‘z-index‘, ++$.dialog.__zindex);
            });
            /* 修改项，添加keycode冒泡判断 2014-09-10 */
            if (!$.dialog.__keydown) {
                window.listenKeyDownBubble = true;
                $(document).keydown(function(event, data) {
                    // 替换keyCode
                    if (data && data.keyCode) {
                        event.keyCode = data.keyCode;
                    }
                    if (event.keyCode == 27) {
                        var elements = $(".dialog:visible");
                        if (elements.length == 0) return false;
                        elements = elements.sort(function(l, r) {
                            if (parseInt($(l).css("z-index")) < parseInt($(r).css("z-index"))) return 1;
                            else return -1;
                        });
                        var current = $(elements[0])
                            .find("> .content > :first-child")
                            .data("dialog");
                        if (current.isDynamic) current.close();
                        else current.hide();
                        return false;
                    }
                });
                $.dialog.__keydown = true;
            }
        }

        this.show = function() {
            if ($.isFunction(options.beforeShow)) {
                if (!options.beforeShow.call(context, options)) {
                    return;
                }
            }


            var getOpacity = function(id) {
                if (!isIe) {
                    return $(‘#‘ + id).css(‘opacity‘);
                }

                var el = document.getElementById(id);
                return (undefined != el
                        && undefined != el.filters
                        && undefined != el.filters.alpha
                        && undefined != el.filters.alpha.opacity)
                    ? el.filters.alpha.opacity / 100 : 0.5;
            }
            /* 是否显示背景遮罩层 */
            if (options.isModal) {
                $(‘#‘ + overlayId).fadeTo(‘fast‘, getOpacity(overlayId));
            }

            dialog.fadeIn(‘fast‘, function() {
                if ($.isFunction(options.afterShow)) {
                    options.afterShow.call(context, options);
                }
                var d = $(this).find(‘iframe‘);
                if (d.length==0) {
                    $(this).focus();
                } else {
                    d.one("load", function() {
                        this.contentWindow.focus();
                    });
                }
                
                returnValue = null; //清空
                isShow = true;
            });
              
            resetPos();
        }

        this.close = function() {
            if ($.isFunction(options.beforeClose)) {
                if (!options.beforeClose.call(context, options)) {
                    return;
                }
            }

            dialog.fadeOut(‘fast‘, function() {
                $(this).remove();
                isShow = false;
                if ($.isFunction(options.afterClose)) {
                    options.afterClose.call(context, options);
                }
                returnValue = null; //清空
            });

            if (options.isModal) {
                $(‘#‘ + overlayId).fadeOut(‘fast‘, function() { $(this).remove(); });
            }

            delete context;
        }

        this.hide = function() {
            if (!isShow) {
                return;
            }

            if ($.isFunction(options.beforeHide)) {
                if (!options.beforeHide.call(context, options)) {
                    return;
                }
            }

            dialog.fadeOut(‘fast‘, function() {
                if ($.isFunction(options.afterHide)) {
                    options.afterHide.call(context, options);
                }
            });

            if (options.isModal) {
                $(‘#‘ + overlayId).fadeOut(‘fast‘);
            }

            isShow = false;
        }

        //设置窗体返回值
        this.setReturnValue = function(value) {
            returnValue = value;
        }

        //获取窗体放回值
        this.getReturnValue = function() {
            return returnValue;
        }

        init.call(this);

        $.dialog.__zindex++;
        $.dialog.__count++;
    }

    $.dialog.__zindex = 500;
    $.dialog.__count = 1;
    $.dialog.__keydown = false;

    $.fn.dialog.defaults = {
        width: "auto", // 默认值。
        name: "", // dialog名称
        title: ‘标题‘, // 标题文本，若不想显示title请通过CSS设置其display为none
        isShowTitle: true, // 是否显示标题栏。
        closeText: ‘ ‘, // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none
        isDraggable: false, // 是否移动
        isModal: true, // 是否是模态对话框
        isCenter: true, // 是否居中。
        isFixed: false, // 是否跟随页面滚动。
        isCreateId: false, // 对话框的id，若为false，则由系统自动产生一个唯一id。
        isNearTrigger: false, // 是否跟随触发对象
        triggerElement: null, // 触发对象   id or element
        triggerPosition: null, // 调节弹窗位置事件
        beforeShow: null, // 显示前触发事件
        afterShow: null, // 显示后触发事件
        beforeClose: null, // 关闭前触发事件
        afterClose: null, // 关闭后触发事件
        beforeHide: null, // 隐藏前触发事件
        afterHide: null // 隐藏后触发事件
    };

})(jQuery);


$.getDialogByChildWindow= function(dialogName) {
    return parent.$(".dialog[name=‘" + dialogName + "‘] > .content > :first-child ");
}

在页面点击click

$("#btnBillProcess").click(function () {
       rcpnDetail.openWindow({
                width: ‘970px‘,
                name: "BillDeal",
                height: ‘600px‘,
                title: ‘账务处理‘,
                url: ‘@Url.Action("BillDeal", "Cashier")?@UrlParams.PNAME_MULTY_BILLS=@Model.BillID&viewHis=@ViewBag.tableType‘
            });
});

弹出层打开自动获取焦点

var d = $(this).find(‘iframe‘);
 if (d.length==0) {
    $(this).focus();               

} else {
  d.one("load", function() {
  this.contentWindow.focus();
 });
}

dialog获取焦点

标签：style   io   os   ar   for   div   sp   2014   art   

原文地址：http://www.cnblogs.com/Nicolas-wang/p/3992558.html