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

    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

  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