Box Demo
Wbox--Lightweight popup jquery plugin, Based on jQuery1.4.2 development, mainly to achieve the effect of the popup box, and added a lot of interesting features, such as the IMG Lightbox effect, callback function, show hidden layer, Ajax page, iframe embedded page ...
- Background transparency can be adjusted to the actual situation, without even setting the background
- You can add wbox headings as needed
- Support for setting the window location, default to show in center
- Support for callback functions
- Support HTML content Customization
- IMG Lightbox View Diagram function
- Support for displaying #id content in Wbox
- Support Ajax page Content
- Background setting is supported, background not set
- Support Wbox drag and drop function
- ESC key, or double-click on the background to close Wbox
- . wboxclose content Click to close Wbox, whether it's assembled HTML, or hidden HTML, or even the contents of an IFRAME. Wboxclose
Demo section:
Set the Wbox code for the name:
$ ("#wbox1"). Wbox ({
Title: "Test title Name",
HTML: "Click the popup setting name of Wbox"
});
Click the popup setting name of the Wbox background for the transparent Wbox code:
$ ("#wbox2"). Wbox ({opacity:0,html: ' Click to pop up the background for Transparent Wbox '});
Click the popup 2 background for transparent Wbox popup without background Wbox code:
$ ("#wbox3"). Wbox ({overlay:false,html: ' Click to eject no background wbox '});
Click to eject no background wbox test picture href code:
$ ('. Wbox '). Wbox ();
Test the picture href to hide the layer code with ID #info:
$ ('. Wbox '). Wbox ();
Hidden layers with ID #info can be dragged #wboxul layer code:
$ (' #drag '). Wbox ({drag:true,title: ' The layer ' of the Wbox Feature Introduction section '});
Can drag the #wboxul layer IMG Lightbox to see the code:
$ ("#imgA"). Wbox ({images:[' 001.jpg ', ' 002.jpg ', ' 003.jpg ', ' 004.jpg ', ' 005.jpg '],isimage:true});
Test IMG Lightbox Even see the iframe Baidu code:
$ ("#isFrame"). Wbox ({isframe:true,iframewh:{width:800,height:400}});
Test iframe Baidu local IFRAME self-applicable height code:
$ ("#isFrame2"). Wbox ({isframe:true});
Local IFRAME self-applicable height setting location is left300 Top 100 code:
$ (' #setPos '). Wbox ({setpos:true,left:300,top:100,html: ' Set position is left300 Top 100 '});
Set position to left300 Top 100 view effect to scroll to top 100px oh ~ajax loading content code:
$ ("#ajax"). Wbox ();
Ajax 1.html does not have a caption for the Popup box code:
$ ("#noTitle"). Wbox ({notitle:true});
Pop-up boxes without captions use callback to add Wbox code for 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: ' Map--can be dragged ',
HTML: "",
Callback:callback,drag:true});
Load map-Use callback function click here to download Wbox
- Download the Wbox file first, and then add the Wbox
- Introducing Wbox.js Files
- Introducing WBOX.CSS Files
- Note: The images in the Wbox source folder are placed in the same directory as the JS,CSS
