用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仿模態窗口的，但是感覺都沒講到點子上，我希望這篇文章對大家有所幫助吧。