开发背景
开发前端页面，采用layui框架和样式布局，拟用layer.open打开一个新窗口
遇到问题
在自定义css文件中，编写layer弹出窗口的样式时，自定义样式不能覆盖layer.css中的样式。
解决步骤
- 一开始在head标签里写自定义样式，代码如下：
<link rel="stylesheet" th:href="@{lib/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{css/dashboard.css}" media="all">
<!--<link rel="stylesheet" th:href="@{css/public.css}" media="all">-->
<!--阿里icon class库,通过icon-text等类设置图标-->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
//自定义样式
</style>
<body>
<script th:src="@{lib/jquery/jquery.min.js}"></script>
<script th:src="@{lib/layui/layui.js}"></script>
<script th:src="@{js/lay-config.js}" charset="utf-8"></script>
</body>
如上代码，在layer.open()后，产生的新div层，自定义样式不能覆盖原有样式。
- 调整style位置，放到body底部加载时，自定义样式就能覆盖layer的样式。 调整后代码如下：
<body>
<script th:src="@{lib/jquery/jquery.min.js}"></script>
<script th:src="@{lib/echarts/echarts.min.js}"></script>
<script th:src="@{lib/echarts/china.js}"></script>
<script th:src="@{lib/layui/layui.js}"></script>
<script th:src="@{js/lay-config.js}" charset="utf-8"></script>
<style>
.layui-layer {
background-color: rgba(4, 14, 74, 0.70);
border-color: #00baff;
}
.layui-layer-title {
height: 70px;
line-height: 70px;
border: none;
font-size:24px;
background: rgba(4, 14, 74, 0.30);
color: #ffffff;
}
//剩下代码
</style>
</body>
