Jquery dialog thickbox
Jquery dialog can be made to work in a similair way to thickbox.Any link to content, can have its content loaded into a jquery dialog box, by simply adding a class to the href.
For example this standard page can be made to behave like a thickbox pop-up by adding the class ‘dialog-box’ (the title is used to title the dialog box).
<a href="/demos/thickdialog/page.php" class="dialog-box" title="popup">popup</a> |
Example: popup (example works fine outside of wordpress)
In order to do this you will need Jquery, and Jquery-UI and the code below.
Alternatively I have written a library called thickdialog which supports the popups, confirmation boxes and forms just by adding a simple class, which is compatible with any framework and can be downloaded from there.
// pop ups, just give an anchor point the class dialog_box, and the title will be used as the title $(function (){ $('a.dialog-box').click(function() { var url = this.href; var title = this.title; // show a spinner or something via css var dialog = $('<div id="dialog" style="display:none" class="loading">Loading</div>').appendTo('body'); // open the dialog dialog.dialog({ width: dialogBox_width, // add a close listener to prevent adding multiple divs to the document close: function(event, ui) { // remove div with all data and events dialog.remove(); }, modal: true }); // load remote content dialog.load( url, {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object function (responseText, textStatus, XMLHttpRequest) { // remove the loading class dialog.removeClass('loading'); dialog.dialog('option', 'position', 'center'); dialog.dialog('option', 'title', title); } ); //prevent the browser to follow the link return false; }); }); |
10,698 views
This entry was posted on Wednesday, June 20th, 2012 at 11:37 am and is filed under Javascript, Programming, Thickdialog. You can follow any responses to this entry through the RSS 2.0 feed.