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

使用上面的代码我必须写$('.ui-dialog-titlebar-close').addClass('icon-remove'); 每一个对话框中的字体 - 真棒图标。我也可以使用onload事件来添加一个类到动态创建的元素。但是有没有更好的解决方案？任何只使用CSS或SCSS的解决方案？使用jQuery用户界面对话框

来源

2013-08-07 PHPst

您是否尝试过为.ui-dialog-titlebar-close的引导程序图标重新创建CSS？这似乎是一个奇怪的黑客，但它应该工作 –

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的对话框的标题栏关闭

来源

2014-02-21 15:24:11 ericdecoff

这里如何与字体真棒只用css代替jQuery用户界面的对话框关闭图标：

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

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

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

来源

2015-07-01 03:39:22

我用这种方法，而不是使用CSS的内容。我使用closeText选项作为对话框，就像下面的答案一样，并将所示备忘单中的图标复制/粘贴到我的Javascript中;那么它只需要一些最小的CSS。 – Ecropolis

另一种是利用了closeText的UI的对话框选项。您可以直接把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样式以隐藏各种默认按钮元素，如果你使用的是默认的主题。

我编译这些都变成codpen样本：http://codepen.io/anon/pen/aNWrYN

来源

2016-03-24 21:38:47 Pandy

后试图得到这个工作小时，这是最后在更换合闸按钮图标真棒一个字体为我工作性格：

$("#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-24 17:34:40 lolero

使用jQuery用户界面对话框

回答

更新

相关问题