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 = "明细";