弹出层是一个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(); }); }