2
$('.toggle').click(function () {
    $('.d').dialog();
    $('.ui-dialog-titlebar-close').addClass('icon-remove');
});

Using above code I have to write $('.ui-dialog-titlebar-close').addClass('icon-remove'); for every dialog. I could also use onload event for adding a class to dynamically created elements. But is there any better solution? Any solution that only use css or scss?

Handsome Nerd
  • 17,114
  • 22
  • 95
  • 173
  • 1
    Have you tried recreating the CSS for the bootstrap icon for .ui-dialog-titlebar-close? It seems like a weird hack but it should work – Matt Cooper Aug 07 '13 at 11:35

5 Answers5

3
var $dialog = $('#dialogScreen').dialog({
        open: function(event, ui) {
            // remove default close icon
            $('.ui-dialog-titlebar-close span').removeClass('ui-icon ui-icon-thickclose');

            // Yuck they have close text let's remove that
            $('.ui-dialog-titlebar-close span').text('');

            // Lets add font awesome close icon
            $('.ui-dialog-titlebar-close span').addClass('fa fa-times');

            // ok lets remove the default underline for a hyperlink
            $('.ui-dialog-titlebar-close').css('text-decoration','none');

            // ok lets make the titlebar bigger so we can increase icon size
            $('.ui-dialog-titlebar').height('2em');

            // ok lets increase .ui-dialog-titlebar-close to handle bigger icon and re-center
            $('.ui-dialog-titlebar-close').height('2em').width('2em').css('top','15px');

            // now lets increase the font-awesome icon and re-center
            $('.ui-dialog-titlebar-close span').addClass('fa-2x').css('padding-left','3px');

            // I also like to load the screen here too
            $('#dialogScreen').load('pages/options.html',function(){
                $(this).trigger('create');
            });
    }
});

This is the code I use to override the icon in the ui-dialog-titlebar-close

ericdecoff
  • 56
  • 2
2

Here how to replace the dialog close icon of Jquery UI with font-awesome using css only :

.ui-dialog .ui-dialog-titlebar-close { /* remove default close jUi */
background:none;
border:0;
}
.ui-dialog-titlebar-close { 
position:relative;
float:right;
}
.ui-dialog-titlebar-close:after {
position: absolute;
font-family: FontAwesome;
font-size: 1.0em;
top:0;
right:2px;
content: "\f00d "; 
}

Change content with your desired icon

Update

A better version :

.ui-dialog-titlebar-close { 
position:relative; 
background:0;
border:0;
float:right;
z-index:1;
} 

.ui-dialog-titlebar-close:after {
position:relative;
top:5px;
font-family: FontAwesome;
font-size: 1.0em;
content: "\f28b"; /*Code FA */
z-index:2;
}

You can find Font Awesome "codes" here: https://fortawesome.github.io/Font-Awesome/cheatsheet/

Fiddle: https://jsfiddle.net/x0154xdm/1/

Pere
  • 1,068
  • 12
  • 20
Anyone_ph
  • 616
  • 6
  • 15
  • I used this method but instead of using CSS for content. I used the closeText option for dialog like the answer below and copy/pasted the icon from the noted cheat sheet into my Javascript; then it just took some minimal CSS. – Ecropolis May 31 '17 at 18:36
0

An alternative is utilizing the ui-dialog option for closeText. You can put the FontAwesome <i> tag directly into this option like so: 

$( "#dialog" ).dialog({
    closeText:'<i class=\"fa fa-times-circle\"></i>'
});

But if you don't want to have to re-set this option every time you're creating a dialog, consider overriding the default jQuery UI options.

$.extend($.ui.dialog.prototype.options, {
    closeText:'<i class=\"fa fa-times-circle\"></i>',
});

One other thing to consider is that you'll need to do some CSS styling to hide various default button elements if you're using the default theme.

I've compiled these all into a sample codpen: http://codepen.io/anon/pen/aNWrYN

Community
  • 1
  • 1
Pandy
  • 455
  • 4
  • 15
0

After hours of trying to get this to work, this is what finally worked for me in replacing the closing button icon for a Font Awesome character:

$("#dialog").dialog();
$("#dialog").closest(".ui-dialog")
            .find(".ui-dialog-titlebar-close")
            .empty()
            .append("<span class='fa fa-times'></span>");

The key to my success was to include a css rule to remove the text-indent inside the button:

.ui-dialog-titlebar-close {
  text-indent: 0;
}
lolero
  • 1,253
  • 2
  • 10
  • 18
0

With fontawesome 5, this can be achieved by:

.ui-icon-closethick {
  text-indent: 0;
}

.ui-icon-closethick::after {
  text-indent: 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f00d";
}

See: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

trond
  • 1