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. Machine Learning Projects for Final Year machine learning projects for final year

      Deep Learning Projects assist final year students with improving your applied Deep Learning skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include Deep Learning projects for final year into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Deep Learning Projects for Final Year even arrange a more significant compensation.

      Python Training in Chennai Python Training in Chennai Angular Training Project Centers in Chennai

  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