用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仿模态窗口的，但是感觉都没讲到点子上，我希望这篇文章对大家有所帮助吧。