jquery-ui弹出层在最顶层显示

这篇帖子是看了其它人的帖子之后，偶有所创，如有建议，请点评。

一般来说，有时候可能页面的大小有限制，导致弹出层可能不是很漂亮，这时候，我们需要在最顶层显示，这样比较合理，也比较美观，废话不多说。

以下的功能是，将页面的一个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){}});});

<img id="imgLogo" src="<c:url vlaue='/test/test.jpg'/>"/>

<div id="imgDiv" style="display: none;width: 100%;height: 100%;"><div align="center"><img src="#" width="100%" height="100%" id="hideImg" style="border: 10px solid gray;margin: 0px;padding: 0px;"/></div></div>

上面代码，本来imgLogo显示的大小，很小，小到你看不清楚，但如果点击一下这个小的图片，你会发现，弹出来一个大的弹出层，包裹着这个图片。

以上用的是jquery-ui的弹出层在最顶层以模态窗口显示。其它插件的显示也跟这是一样的，如easyui，但easyui应该来说比较简单点，当然，也许是我对jqueryui的使用了解的少一点。但有一点值得提的是，不管是用什么插件，这里有一个窗口关闭的问题，不知为何，将窗口置顶后，你将不能通过本页面的任何事件来操作窗口了，只能执行事先给窗口绑定好的事件，就是该窗口元素的属性中支持的事件绑定。当然，还有一个比较笨的办法，也是本人用jqueryui的时候，时间较紧，不想深究其事件，用的一个办法，就是将窗口元素对象，设为该页面的全局属性，当需要关闭的时候，通过js定位到该页面，找到该窗口元素的实例化对象，然后通过这个对象来操作窗口关闭。（window.top..frames["该页面iframe的name属性"].dig.dialog("close")）页面间可能嵌套多层，这种写法只是一个例子，具体代码依情况而定。