彈出層是一個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(); }); }