thickdialog
June 20th, 2012 Jquery dialog can be made to work as a either an ajax form, a dialog box or confirmation box just by use of a class similair to the way in which thickbox used to work (the examples work perfectly outside of wordpress).ThickDialog examples
Simple thickbox style popup
Popup example
code:
<a href="/demos/thickdialog/popup.html" title="A pop up" class="dialog-box">Popup example</a> |
usage: add the class “dialog-box” to make this work
Simple thickbox style confirmation box
Confirm example
code:
<a href="/demos/thickdialog/delete.html" title="Are you sure?" class="dialog-confirm">Confirm example</a> |
usage: add the class “dialog-confirm” to make this work
Simple thickbox style form submission
Form example
code:
<a href="/demos/thickdialog/form.php" title="Please complete" class="dialog-confirm">Form example</a> |
usage: add the class “dialog-form” to make this work
4,996 viewsjquery ui ajax form thickbox
June 20th, 2012 Jquery dialog can be made to work as a ajax form in a similair way to thickbox.The link to the form (such as registration form), can be made to load inside a popup, and loaded using ajax by simply adding a class to the href.
For example this link could perform a registration, just like thickbox used to behave adding the class ‘dialog-form’ (the title is used to title the form popup) loading the content on submission.
<a href="/demos/thickdialog/form.php" class="dialog-form" title="Register">register</a> |
Example: register
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 form, confirmation box and pop ups just by adding a simple class, which is compatible with any framework and can be downloaded from there.
// form pop ups, just give an anchor point the class dialog_form, and the title will be used as the title $(function (){ function submitBind(layout,original_url){ $(layout).find('form').submit(function(event){ /* stop form from submitting normally */ event.preventDefault(); url = $(this).attr('action')=='' ? original_url : $(this).attr('action'); /* Send the data using post and put the results in a div */ $.post( url, $(this).serialize(), function(data) { $('#dialog').empty(); $('#dialog').append(data); $('#dialog').dialog('option', 'position', 'center'); submitBind(layout, original_url); }); }); } $('a.dialog-form').click(function() { var original_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( original_url, function (responseText, textStatus, XMLHttpRequest) { // remove the loading class dialog.removeClass('loading'); dialog.dialog('option', 'position', 'center'); dialog.dialog('option', 'title', title); submitBind(this,original_url); } ); //prevent the browser to follow the link return false; }); }); |
jquery confirmation box thickbox
June 20th, 2012 Jquery dialog can be made to work as a confirmation box in a similair way to thickbox.The link to the action (such as deletion), can be made to display a confirmation box before it completes, by simply adding a class to the href.
For example this link could perform a deletion, just like thickbox used to behave adding the class ‘dialog-confirm’ (the title is used to title the dialog confirm) will request the user to confrim firstly.
<a href="/demos/thickdialog/delete.php" class="dialog-confirm" title="Are you sure about this?">delete</a> |
Example: delete(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 confirmation box, pop ups and forms just by adding a simple class, which is compatible with any framework and can be downloaded from there.
// confirm box, add the class dialog-confirm and a title and it does the rest $(function (){ $('a.dialog-confirm').click(function() { var url = this.href; var dialog = $('<div id="dialog" style="display:none" title="Are you sure?">'+this.title+'</div>').appendTo('body'); dialog.dialog({ resizable: false, height:confirmBox_height, modal: true, buttons: { "Yes": function() { $(this).dialog( "close" ); window.location.href = url; }, "No": function() { $(this).dialog( "close" ); } } }); dialog.dialog('option', 'position', 'center'); //prevent the browser to follow the link return false; }); }); |
Jquery dialog thickbox
June 20th, 2012 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; }); }); |