快捷導(dǎo)航

修改jquery里的dialog對話框插件為框架頁(iframe) 的方法

更新時間：2010年09月14日 02:09:27 作者：

為什么我不直接用modal form來做呢？所以我就做了個jquery下面dialog的插件，需要引用原來dialog的文件。

jquery有個很不錯的ui插件，dialog插件,他的官方網(wǎng)站上有各種形式的演示：http://jqueryui.com/demos/dialog/ ,可能大家用得比較多的還是它的默認(rèn)模式，具體的用法官網(wǎng)上都有，也有中文的講解地址，我就不再重復(fù)了，最近在弄彈出框架頁，仔細(xì)一看，和dialog插件的modal form 模式很相似，demo演示效果：http://www.lovewebgames.com/addNews.aspx

就是這么個效果，要進(jìn)行登錄注冊彈出層，至于為什么我不直接用modal form來做呢？因為我喜歡，你管我。所以我就做了個jquery下面dialog的插件，需要引用原來dialog的文件。具體代碼如下:

復(fù)制代碼代碼如下:

 
(function ($) { 
$.fn.openWidow = function (options) { 
var divId = "dialog" + Math.round(Math.random() * 100); 
var settings = { 
id: divId, 
width: 300, 
height: 200, 
modal: true, 
buttons: { 
}, 
show: "explode", 
hide: "highlight", 
title: "提示", 
url: "/test.aspx", 
close: function () { 
$("#" + this.id).remove(); 
//debugger 
if (document.getElementById(this.id)) 
document.body.removeChild(document.getElementById(this.id)); 
} 
}; 
if (options) { 
$.extend(settings, options); 
} 
$("body").append('<div id="' + settings.id + '" title="Dialog Title"><p class="loading"></p></div>'); 
// Dialog 
$('#' + settings.id).dialog({ 
autoOpen: false, 
title: settings.title, 
width: settings.width, 
height: settings.height, 
modal: true, 
bgiframe: true, 
show: settings.show, 
hide: settings.hide, 
buttons: settings.buttons, 
close: settings.close, 
open: function () { 
$("#" + settings.id).html('<iframe src="' + settings.url + '" frameborder="0" height="100%" width="100%" id="dialogFrame" scrolling="auto"></iframe>'); 
}, 
resizeStop: function () { 
$("#dialogFrame").css("width", parseInt($(this).css("width")) - 5); 
$("#dialogFrame").css("height", parseInt($(this).css("height")) - 5); 
} 
}); 

$('#' + settings.id).dialog("open"); 
return this; 
}; 
})(jQuery); 

我想大家應(yīng)該都還看得懂的，沒啥復(fù)雜的，就是重復(fù)重復(fù)再重復(fù)的工作。甚至很多參數(shù)本身就是dialog的，我只是加了層皮。我相信這個方法是很多新手都希望用到的，畢竟不是每個人都喜歡并熟練使用ajax，所以這時候iframe的用途還是很大的。

并希望有興趣的朋友加入我的Q群：70210212、5678537，平時多勾通下，有問題不用一個人想。

您可能感興趣的文章: