jquery 彈出窗口引入新的頁面和JS

方法一：

網上找到是這樣的

showDialog = function (url, title, width, height, id) {
var content = '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';
var divContent = '<div id="' + id + '">';
var win = $('<div/>').dialog({
content: content,
width: width,
height: height,
modal: true,
title: title,

onClose: function () {
$(this).dialog('destroy');
}
});

win.dialog('open');
};

 

修改后是這樣的，沒有明白的是作者為什么把ID作為單獨的參數傳遞，父窗口需要嗎？ $('<div/>').dialog ，作者是解決什么問題的。上面的代碼是完全可用

showDialog = function (url, title, width, height, id) {
    var content = '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';
    var divContent = '<div id="' + id + '"><div/>';
    var win = $(divContent).dialog({ 
        content: content,
        width: width,
        height: height,
        modal: true,
        title: title,
        
        onClose: function () {
            $(this).dialog('destroy');
        }
    });

    win.dialog('open');
};

　　

//使用調用：showDialog("showDetails.jsp","明細","600","500","div1");

　　

方法二：與方法一相似。

 

OpenUrlDialog = function (options) {
var dialogWidth=options.width?options.width:$(window).width()-50;
var dialogHeight=options.height?options.height:$(window).height()-50;
var currentDialog = $("<div id='dialog-frame-window'></div>")
.html('<iframe src="' + options.url + '" width="'+(dialogWidth-50)+'" height="'+(dialogHeight-50)+'" style="border:0"></iframe>') 
.dialog({
modal: true,
autoOpen: false,
width:dialogWidth,
height:dialogHeight,
title:options.title,
position: ["auto", "auto"],
closeText: ''
});
currentDialog.dialog('open');
},

CloseUrlDialog =function(){
if(self!=top)
{
$(top.parent.document.body).find('.ui-dialog-titlebar .ui-icon-closethick').click();//觸發dialog中的close按鈕事件，達到關閉diaolog 的目的
}
};

調用后窗口有滾動條，不是全屏填充的，下面的修改解決存在滾動條問題

OpenUrlDialog = function (options) {
    var dialogWidth=options.width?options.width:$(window).width()-50;
    var dialogHeight=options.height?options.height:$(window).height()-50;
   var currentDialog = $("<div id='dialog-frame-window'></div>")
    .html('<iframe src="' + options.url + '" width="100%" height="99%" frameborder="0" scrolling="no" style="border:0"></iframe>') 
    .dialog({
        modal: true,
        autoOpen: false,
        width:dialogWidth,
        height:dialogHeight,
        title:options.title,
        position: ["auto", "auto"],
        closeText: ''
    });
    currentDialog.dialog('open');
},

CloseUrlDialog =function(){
    if(self!=top)
    {
          $(top.parent.document.body).find('.ui-dialog-titlebar .ui-icon-closethick').click();//觸發dialog中的close按鈕事件，達到關閉diaolog 的目的
    }
};

　　

 

使用時：

var options = {};
	   options.url = "showDetails.jsp";
	   options.width = 600;
	   options.height = 500;
	   options.title = "明細";