Saturday, August 8, 2015

jQuery UI Dialog Create Custom Close Button


Just wanted to share how to create a custom close button with jQuery UI's Dialog Widget

Create a dialog this way

// TODO store modalDialog somewhere so you can call modalDialog.dialog('open'); and modalDialog.dialog('close'); when required

I suggest creating a wrapper JavaScript class, to store the dialogs by some id. That way you can retrieve dialogs already created. Some basic functions like wrapper.closeDialog(id), wrapper,createDialog(id) and so on will go a long way.

The key is, when using the .dialog function, jQuery UI wraps the dialog in its own div (the $(this).parent().find(".ui-dialog-titlebar") line).

Hope this helps someone.


  1. very positive comments from your readers I commend you for that thanks to one of your respondents I actually got to learn about myassignmentwriting com au a platform that offers exemplary assignment help

  2. Programming and architecture sector is becoming more and more comfortable to access into the main stream society.They write my essay for the betterment of this service.

  3. Really I enjoy your site with effective and useful information. It is included very nice post with a lot of our resources.thanks for share. i enjoy this post. custom writings

  4. Thanks again for the article post.Thanks Again. Really Great. customwritingservice