用JqueryUI的Dialog+IFrame實現仿模態視窗效果

標籤：style   blog   http   io   ar   color   os   sp   資料   

　　大家有沒有想過這樣一個問題，當我點擊某個圖片的時候，我想彈出這個圖片資訊的詳情並修改，於是你首先想到的是不是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仿模態視窗的，但是感覺都沒講到點子上，我希望這篇文章對大家有所協助吧。

用JqueryUI的Dialog+IFrame實現仿模態視窗效果