Using jQueryUI's dialog+iframe to realize the simulation modal window effect

Have you ever thought of such a problem, when I click on a picture, I want to pop up the details of this picture information and modify, so you first think of is not window.open? The window.open method does, but has its limitations, for example, the title is displayed as a URL, click on the other places the window will disappear, and then point to other pictures, the dead and alive are not out, originally opened the window is not closed, ETC .... So you think of the modal window, but the modal window has a bad place, can only be applied to IE browser, and the style seems to be not good. Well, the sky a loud bang, jQueryUI dialog turned out, we first look at the official example. Http://jqueryui.com/dialog/'s official example has already explained everything, and the style looks good. But there is no embedded IFRAME, so we have to have some things to do, first look at the effect of the finished product. Click on a picture and the following dialog box appears. The following is the effect of the pre-click, each picture has an ID, this ID is stored in the database ID, an ID corresponding to a picture.

The following is the effect after the popup.

In fact, this is dialog embedded an iframe, the principle is very simple. As you can see, I used the window.open method before, just commented out. The following notes are clearly written about the specific usage.

 //move the mouse over the display border    functionOnhover () {////mouse slide over$ (". Imgborder"). Hover (function () {            $( This). attr ("style", "border:2px solid Red")        }); //Mouse Slide Out$ (". Imgborder"). Mouseout (function () {            $( This). attr ("style", "border:0px solid Red")        }); $(". Imgborder"). Click (function () {            $("#<%=hid_product.clientid%>"). Val ($ ( This). attr ("id"));//assigning IDs to hidden fields            //Alert ($ ("#<%=hid_product.clientid%>"). Val ());           //window.open ("productdetails.aspx?id=" + $ (This). attr ("id"), "Product Modification Interface", ' height=300,width=500,top=200,left=200, Toolbar=no,menubar=no,scrollbars=no, Resizable=no,location=no, Status=no ');            //Showiframe ("Modified Information", "http://www.baidu.com", "$");$ ("#<%=hid_id. Clientid%> "). Val ($ ( This). attr ("id")); $("#prodcutDetailSrc"). attr ("src", "productdetails.aspx?id=" + $ ( This). attr ("id"));//set the src of the IFRAME;$ ("#dialog"). dialog ({bgiframe:true, resizable:true,//whether the size can be resetheight:283,//Heightwidth:626,//widthDraggable:false,//whether you can drag. Title: "Company Product editor", modal:true, open:function(e) {//events that are triggered when openingDocument.body.style.overflow= "hidden";//Hide scroll bar}, Close:function() {//events triggered when dialog is closedDocument.body.style.overflow = "visible";//Show scroll barsTest ();           }               }); //window.showModalDialog ("productdetails.aspx?id=" + $ (This). attr ("id"), "", "dialogwidth=500px;dialogheight= 200px ");        }); }

Since it is an IFRAME, the outside must also nest a layer of div, and this layer of the div is hidden by default.

<Divstyle= "display:none;overflow:hidden;padding:3px"ID= "Dialog"><iframeframeborder= "No"Border= "0"marginwidth= "0"marginheight= "0"ID= "Prodcutdetailsrc"scrolling= "No"width= "100%"Height= "100%"></iframe></Div>

About the style of the pop-up page, let's play the imaginary Space yourself ~ ~ ~

In addition, I personally think this article is not a very water article, because I have seen some other similar type of div-mode window, but I do not feel that the point, I hope this article is helpful to everyone.

Using jQueryUI's dialog+iframe to realize the simulation modal window effect