EasyUI中的dialog修改样式

最新推荐文章于 2023-05-09 08:42:16 发布

原创最新推荐文章于 2023-05-09 08:42:16 发布 · 4.9k 阅读

CC 4.0 BY-SA版权

文章标签：

仅作为小白参考用，因为自己百度也百度了相当久，还没百度到。
    easyui作为入门轻量级前端框架方便灵活，但是有个缺点就是太丑，所以上个项目要用时，还得自行修改下样式。无需修改原easyui中的任何css，只需在需要修改的页面添加CSS即可，具体CSS如下：
/*dialog整个标题分两部分组成，一个是整个标题头div，另外一个是标题中文字的div*/
    .window,.panel-title{   /*修改dialog标题文字的div，dialog本身也继承window和panel组件*/
        color:#fff;
        border-color:#3366CC;
        background-color: #3366CC;
        background: -webkit-linear-gradient(top,#3366CC 0,#3366CC 20%);
        background: -moz-linear-gradient(top,#3366CC 0,#3366CC 20%);
        background: -o-linear-gradient(top,#3366CC 0,#3366CC 20%);
        background: linear-gradient(to bottom,#3366CC 0,#3366CC 20%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3366CC,endColorstr=#3366CC,GradientType=0);
    }
    .window .window-body{   /*dialog的整个标题头div修改*/
        border-color: #FFCCCC;
    }
    .panel-header,.panel-header-noborder,.window-header{  /*dialog阴影部分颜色修改*/
        border-color: #FFCCCC;
    }
    .window-proxy-mask,
    .window-mask {    /*最后一步，将原先的灰色蒙版变的更深更突出dialog的效果，适用于浅色主题*/
        background: #000000;
    }