这篇帖子是看了其它人的帖子之后,偶有所创,如有建议,请点评。
一般来说,有时候可能页面的大小有限制,导致弹出层可能不是很漂亮,这时候,我们需要在最顶层显示,这样比较合理,也比较美观,废话不多说。
以下的功能是,将页面的一个div元素,在最顶层以弹出层形式显示。这个功能是个图片放大的功能。
$("img[id*='Img']").click(function(){
var url = $(this).attr("src");
if(url == "") return;
$("#hideImg").attr("src",url);
var html = $("#imgDiv").html();
var dig = window.top.$(html).appendTo(window.top.document.body);
dig.dialog({
title: "图片查看",
width:1024,
height:768,
modal: true,
bgiframe:true,
option:"",
close: function(event, ui){
}
});
});
上面代码,本来imgLogo显示的大小,很小,小到你看不清楚,但如果点击一下这个小的图片,你会发现,弹出来一个大的弹出层,包裹着这个图片。
以上用的是jquery-ui的弹出层在最顶层以模态窗口显示。其它插件的显示也跟这是一样的,如easyui,但easyui应该来说比较简单点,当然,也许是我对jqueryui的使用了解的少一点。但有一点值得提的是,不管是用什么插件,这里有一个窗口关闭的问题,不知为何,将窗口置顶后,你将不能通过本页面的任何事件来操作窗口了,只能执行事先给窗口绑定好的事件,就是该窗口元素的属性中支持的事件绑定。当然,还有一个比较笨的办法,也是本人用jqueryui的时候,时间较紧,不想深究其事件,用的一个办法,就是将窗口元素对象,设为该页面的全局属性,当需要关闭的时候,通过js定位到该页面,找到该窗口元素的实例化对象,然后通过这个对象来操作窗口关闭。(window.top..frames["该页面iframe的name属性"].dig.dialog("close"))页面间可能嵌套多层,这种写法只是一个例子,具体代码依情况而定。