用JqueryUI的Dialog+IFrame实现仿模态窗口效果
大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示为URL,点一下其他地方窗口会消失,然后点其他图片的时候,死活都出不来,原来是前面打开的窗口没被关闭,ETC....于是你又想到了模态窗口,但是模态窗口有一个不好的地方,只能适用于IE浏览器,而且样式貌似也不咋地。好啦,天空一声巨响,JqueryUI的Dialog横空出世了,我们先看看官方给的例子。http://jqueryui.com/dialog/ 官方给的例子其实已经说明了一切,而且样式很好看。不过这里面是没有内嵌IFRAME的,所以我们还要有一些事情要做,先来看看成品的效果吧。点击某一张图片,出现如下的对话框。下面的是点击前的效果,每一张图片都有一个ID,这个ID是存放在数据库中的ID,一个ID对应一张图片。
下面的是弹出后的效果。
其实这是DIALOG内嵌了一个IFRAME,原理还是非常简单的。大家可以注意到,我前面用的是window.open方法,只是注释掉了而已。关于具体的用法,下面的注释已经写得很清楚了。
//鼠标移上去展示边框 function onHover() { ////鼠标滑过 $(".imgBorder").hover(function () { $(this).attr("style", "border:2px solid red") }); //鼠标滑出 $(".imgBorder").mouseout(function () { $(this).attr("style", "border:0px solid red") }); $(".imgBorder").click(function () { $("#<%=hid_Product.ClientID%>").val($(this).attr("id")); //把ID赋入隐藏域 //alert($("#<%=hid_Product.ClientID%>").val()); // window.open("ProductDetails.aspx?id=" + $(this).attr("id"), "产品修改界面", 'height=300,width=500,top=200,left=200,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no'); // ShowIframe("修改信息", "http://www.baidu.com", 500, 300); $("#<%=hid_id.ClientID%>").val($(this).attr("id")); $("#prodcutDetailSrc").attr("src","ProductDetails.aspx?id=" + $(this).attr("id")); //设置IFRAME的SRC; $("#dialog").dialog({ bgiframe: true, resizable: true, //是否可以重置大小 height: 283, //高度 width: 626, //宽度 draggable: false, //是否可以拖动。 title: "公司产品编辑", modal: true, open: function (e) { //打开的时候触发的事件 document.body.style.overflow = "hidden"; //隐藏滚动条 }, close: function () { //关闭Dialog时候触发的事件 document.body.style.overflow = "visible"; //显示滚动条 Test(); } }); // window.showModalDialog("ProductDetails.aspx?id=" + $(this).attr("id"),"", "dialogWidth=500px;dialogHeight=200px"); }); }
既然是一个IFRAME,那么外面肯定还要嵌套一层DIV,而这一层的DIV默认是隐藏的。
<div style="display:none;overflow:hidden;padding:3px" id="dialog"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" id="prodcutDetailSrc" scrolling="no" width="100%" height="100%"></iframe></div>
关于弹出页的样式,大家自己发挥想象空间吧~~~
另外,这篇文章我个人认为不是什么很水的文章,因为我看过一些其他的同类型的DIV仿模态窗口的,但是感觉都没讲到点子上,我希望这篇文章对大家有所帮助吧。
![](https://pic.cnblogs.com/avatar/567748/20200111202800.png)
作者:
KMSFan
出处:http://www.cnblogs.com/kmsfan
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
欢迎大家加入KMSFan之家,以及访问我的优酷空间!
出处:http://www.cnblogs.com/kmsfan
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
欢迎大家加入KMSFan之家,以及访问我的优酷空间!