How To Implement Hybrid jQuery UI Dialogs
erics, Posted June 19th, 2012 at 11:05:55am
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
var self = this; self.Dialog = jQuery('#yourDialog'); if (self.Dialog.length) { self.Dialog.dialog({ autoOpen: false, title: 'Your Dialog Title Here', position: ['center',200], minWidth: 400, modal: true, focus: function() { jQuery(':input', this).keyup(function(event) { if (event.keyCode == 13) { self.Dialog.parent().find('div.ui-dialog-buttonpane button.primary').click(); } }); }, open: function(evt,ui) { jQuery('#Loader-ajax').load('/get_dialog_form_content.php'); }, buttons: { "Cancel": { 'text' : 'Cancel', 'class' : 'cancel', 'click' : function() { jQuery( this ).dialog( "close" ); } }, "Continue": { 'text' : 'Continue', 'class' : 'primary', 'click' : function() { jQuery("#Form-edit").submit(); } // end click } // end Continue button } // end buttons }); // end self.Dialog.dialog // bind the triggering link jQuery("a.yourTrigger").live('click',function(e){ jQuery(".ui-dialog-content").dialog("close"); self.Dialog.dialog('open'); return false; }); } |
HTML
|
1 2 3 4 5 6 |
<div id="yourDialog" class="hide"> <form id="Form-edit" action="/index.php" method="POST"> <input type="hidden" name="action" value="save"> <div id="Loader-ajax" class="clearfix"><img src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif" alt="Please Wait..." /></div> </form> </div> |
Categories: How-To's, Technology Dialog, Enter, Enter key, Focus, howto, JQuery, jQuery UI, Modal, tips, UI
Leave Your Comment
All fields marked with "*" are required.