用JqueryUI的Dialog+IFrame实现仿模态窗口效果

浏览数：35 / 时间：2015年06月09日

　　大家有没有想过这样一个问题，当我点击某个图片的时候，我想弹出这个图片信息的详情并修改，于是你首先想到的是不是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>