如何避免模态面板的圆角和厚黑边？

Posted 2023-02-26

【中文标题】如何避免模态面板的圆角和厚黑边？

【英文标题】：How to avoid rounded edges and thick black border of modal panel?

【发布时间】：2013-05-15 13:28:13

【问题描述】：

每当点击按钮/面板时，我都会显示一个模式面板。我的问题是这个模态面板的外观和感觉，因为我不希望这个面板上有圆形边缘和厚黑色边框，因为我的应用程序的其余部分有薄边框和锋利的边缘。这是类似的东西：http://www.senchafiddle.com/#0RPKU

是否有面板的属性可以更改以避免这种情况？如果不能，你能给我一个可以解决这个问题的 CSS 示例吗？

【参考方案1】：

在您提供的示例小提琴中，您需要更改 padding css 属性。

【讨论】：

好的，如何修复圆角？

【参考方案2】：

快速而肮脏的方式将以下行添加到弹出面板定义中：

style: '-webkit-border-radius: 0; border-radius: 0;'

如果您想要更简洁的东西 - 使用 Saching 方法 - 创建自己的 CSS 类，将其添加到每个面板，但关键的 CSS 区别仍然是 border-radius。

【讨论】：

谢谢！这是寻找最终结果的人的小提琴：senchafiddle.com/#gvnpz#35DTe

【参考方案3】：

更简洁的方法是在自定义类中定义自己的样式并设置为模式面板。这样你就可以控制外观。您不必担心将模式定位在正确的位置，因为行为不会受到影响。

喜欢-

  .some
        border: 1px solid #000;           
        background: #fff;
        color:#ff8100;
        font-family: verdana;
        ...
    

并将此类作为baseCls:'some' 添加到模态面板。我个人不喜欢添加内联样式和东西。我希望可以有一个 config 选项用于类似 ui 配置选项之类的东西。但我猜ui 配置不适用于panels。