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

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

4

5 回答 5

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

这是我用来覆盖 ui-dialog-titlebar-close 中的图标的代码

于 2014-02-21T15:24:11.293 回答
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/

于 2015-07-01T03:39:22.533 回答
0

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

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

但是，如果您不想在每次创建对话框时都重新设置此选项，请考虑覆盖默认的 jQuery UI 选项。

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

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

我已经将这些全部编译成一个示例代码笔：http: //codepen.io/anon/pen/aNWrYN

于 2016-03-24T21:38:47.427 回答
0

使用 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

于 2020-02-18T11:23:39.953 回答
0

经过几个小时的尝试，这终于让我为 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;
}
于 2016-10-24T17:34:40.130 回答