更新

Question

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

使用上面的代码我必须写$('.ui-dialog-titlebar-close').addClass('icon-remove'); 对于每个对话框。我也可以使用onload事件为动态创建的元素添加一个类。但有更好的解决方案吗？任何只使用css或scss的解决方案？

Answer 1

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');
            });
    }
});

这是我用来覆盖ui-dialog-titlebar-close

中的图标的代码

Answer 2

这里是如何使用css替换Jquery UI的对话框关闭图标和font-awesome：

.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 "; 
}

使用所需图标更改content

更新

更好的版本：

.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;
}

你可以在这里找到Font Awesome“代码”： https://fortawesome.github.io/Font-Awesome/cheatsheet/

小提琴： https://jsfiddle.net/x0154xdm/1/

Answer 3

另一种方法是使用closeText的ui-dialog选项。您可以将FontAwesome <i>标记直接放入此选项中，如下所示：

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

但是，如果您不想在每次创建对话框时重新设置此选项，请考虑overriding the default jQuery UI options。

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

另一件需要考虑的事情是，如果您使用默认主题，则需要执行一些CSS样式来隐藏各种默认按钮元素。

我已将这些全部编译成样本码：http://codepen.io/anon/pen/aNWrYN

Answer 4

经过几个小时的试图让这个工作起来，这就是我替换Font Awesome角色的关闭按钮图标最终起了作用：

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

我成功的关键是包含一条css规则来删除按钮内的文本缩进：

.ui-dialog-titlebar-close {
  text-indent: 0;
}

Answer 5

使用fontawesome 5，可以通过以下方式实现：

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

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

请参阅： https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

在jquery ui对话框中使用font-awesome图标

5 个答案:

更新