We recommend a useful jquery pop-up layer plug-in -- wbox

Http://www.xuejiehome.com/blread-1621.html

Some information will inevitably be displayed on the pop-up layer during our project process. Here we recommend a relatively good jquery plug-in. The following describes the features and features added in the new version.

WBox features

• The background transparency can be adjusted based on the actual situation.
• You can add the wBox title as needed.
• Support callback Functions
• Html content Customization
• # ID content can be displayed in wBox
• Support for Ajax page content
• Support iFrame
• Supports wBox drag and drop
• Press the ESC key or double-click on the background to close the wBox.
• When the class is wBox_close, you can click to close wBox, whether it is assembled html, hidden html, or even. wBox_close In the iframe content.

New Features

• Optimize code ~
• Beautify the interface ~
• By default, it can be dragged. If drag is false, it is disabled.
• Added the wBox close method: wBox. close ()
• Add wBox open method: wBox. showBox ()
• Added the Timed Shutdown setting for wBox: Set the Timed Shutdown Time through the timeout parameter.
• Added to display wBox, $ (s). wBox ({show: true}) without triggering the click event })
• Remove the lightbox function (prepare a separate jQuery lightbox plug-in)
• Remove Window Location settings

Click here to download: Download wbox

Usage:

• First download the wBox file, and then
• Introduce the wbox. js File
• Import wbox.css File

Code:

Var wBox = $ ("# wbox1 "). wBox ({title: "Test Title Name", html: "<div class = 'Demo'> click the wBox that sets the Name </div>"}); display wBox, wBox. showBox () Disable wBox. close (). wBox is used. showBox ()

(1) Click "2" to bring up a transparent wBox　　

$ ("# Wbox2 "). wBox ({opacity: 0, html: "<div class = 'Demo'> click a wBox with a transparent background </div> "});

(2) automatically disable wBox in 5 seconds　　

$("#wbox3").wBox({target:"#info",timeout:5000});

(3) image wBox

$('.wboxImg').wBox({target:"004.jpg",requestType:"img"});

(4) Hide the layer whose id is # info　

$('.wbox').wBox({target:"#info"});

(5) do not drag # wBoxUL Layer　

$ ('# Drag'). wBox ({drag: false, title: 'layers in the wBox function introduction section', target: "# info "});

(6)iframe google　　

$("#isFrame").wBox({requestType:"iframe",iframeWH:{width:800,height:400},target:"http://google.com"}

(7) Local iframe from applicable height

$("#isFrame2").wBox({　　　　requestType: "iframe",　　　　target:"500x400.html"});

(8) Ajax loading content

$("#ajax").wBox({requestType: "ajax",target:"1.html"});

(9) No title dialog box

$ ("# NoTitle "). wBox ({noTitle: true, html: "<div class = 'Demo'> This Is A wBox without a title. The ESC key is disabled, or double-click the background to close </div> "});

(10) Use callback to add the wBox of the map

Var maplet = null; oo = false; var callback = function () {maplet = new Maplet ('mymap'); maplet. centerAndZoom (new MPoint ('heuidvzvvhueeu '), 8); maplet. addControl (new MStandardControl ({view: {pan: false, ruler: false}) ;}$ ("# map "). wBox ({title: '<span style = "font-size: 14px"> pujia Map </span> -- <span style = "font-size: 12px "> drag </span> ', html:" <div id = 'mymap' style = 'width: 500px; height: 400px;'> </div> ", callBack: callback, drag: true });

For specific examples, see examples:

(1) simulate the button in the click box

I need to pop up a div, which is an ajax request. when the request is successful, I need to close the current box and bring up a box. I used a simulated button to close the button, but that button was always unable to be clicked. I had a long struggle in this place and finally found the answer, for example, if your close button id is # cancel_btn, you may think you can simply do this.

$('#cancel_add').click();

Because your id is named by you, you think it must be unique, but in fact it cannot, when it processes the pop-up box, it seems that it re-generates the next div, that is, the current page actually has two cancel_add, so if you use the code above, you cannot select the button. You need to use the following code to select it:

$('#wBox #cancel_btn).click();

In this way, you can.

When getting the value of the text box id in the div as content, we need to get it like this:

$('#wBox #content').val()

(2) The closing button has different effects.

When it is disabled, You may select an image and directly add a connection, and set the class to wBox_close, however, in actual use, I found that this close effect will cause the cursor to directly return to the top of the page. That is to say, if your button is at the bottom, it will go to the top of the page, however, I don't need this effect. I hope it is still in place. Later I found that it is because no div is used. After careful observation, you will find that the closed button given by default is shown as follows:

<div class="wBox_close"></div>

If this function is directly disabled, it will remain in the original position. So I add a div outside the connection and set the class of the div to wBox_close. The effect is the same.

If you have other problems, you can discuss them.

(3) effect display

(4) how to obtain the text box content

This is a supplement to (1), because I later published it under ie6 and 7. That is not acceptable. The value of the obtained text box is undefind, that is to say, when a div is popped up, the plug-in actually clones the div to be displayed, which leads to the existence of two identical divs (including the content inside) on the page, therefore, when we set values or simulate clicks, we cannot accurately select the elements. Here we rewrite the source code and clear the previous div after copying, restore it after it is disabled, which prevents this situation.

1. added the clear operation in the pop-up window.

Find

if (_this.YQ.target) {    con.replaceWith($(_this.YQ.target).clone(true).show());}

 

To:

If (_this.YQ.tar get ){
Var clone_html#((_this.yq.tar get). clone (true). show (); empty (_this.yq.tar get). empty (); // clear con. replaceWith (clone_html );}

2. Restore when disabled

Find

/** Close the pop-up box to remove restoration */this. close = function () {if (C) {B. remove (); C. stop (). fadeOut (300, function () {C. remove ();})}}

To:

this.close=function (){    if (_this.YQ.target) {        $(_this.YQ.target).html(C.find(_this.YQ.target).html());    }    if (C) {        B.remove();        C.stop().fadeOut(300, function(){            C.remove();        })    }}

 

Here I only modify the code as needed. I modified the code for the pop-up div, so I chose to rewrite the Code if there is a target, if you need to modify it elsewhere, you can modify it on your own. Of course, my method may not be the best one. please correct me.

(5) the pop-up box runs to the top.

We will click a connection to pop up the corresponding box, sometimes we may use <a href = "#" onclick =...> in this case, the pop-up box may not be noticed. Here href = "#" will be considered as a Failover point and it will go to the top of the page, we use <a href = "javascript:;" onclick =...> you can.

Paste the modified js code here

Source code download