动态创建弹出层并且弹出层额内容样式可自定义

来源：互联网发布：上汽集团数据业务部编辑：程序博客网时间：2024/06/06 20:44

不知大家在开发中是否遇到这样的需求，在同一项目中需要弹出风格大致一致但是内容及样式有极大更改的大弹出层。引用插件太麻烦且样式和内容不是那么可控。今天我实现了一个动态创建弹出层的效果大概是这样的，在点击需要弹出层的按钮后动态创建一个弹出层，其样式和内容均可写在另外一个HTML页面通过AJAX请求得到，弹出层在页面居中。

先贴上jq源码，第一个参数代表请求的地址（也就是你写的html的地址），第二个参数是附加数据，第三个是数据类型在这里写html就好了，第三个是你设置的弹出层的宽高，也可以设置一个表示宽高均是此值，第四个参数代表回调函数：

接下来贴上css样式：

*{margin: 0;padding: 0;}
.alert-ui-yaler{width:100%;height: 100%;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 86;background: rgba(0,0,0,0.4);}
.alert-ui-dialog{position: fixed;top: 20px;background: #008B8B;z-index: 88;border: 5px solid pink;overflow-y: scroll;overflow-x: hidden;}
.layer-dialog-close-btn{position:absolute;top:0px;right: 0px;z-index: 99;font-size: 20px;width: 24px;height: 24px;cursor: pointer;text-align: center;background: red;display: inline-block;line-height: 24px;border-radius: 5px;

@media only screen and (max-width:1200px ) {
bottom:20px;

}

接着是调用弹出层的html页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layer.css" />
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="layer.js" ></script>

</head>
<body>
<button onclick="definedLayer('layer-test.html',{id:0},'html',[600,800])" >弹出层</button>
</body>
</html>

最后是你自定义的弹出内容是一个html代码片段：

需要给大家提醒的是基本功能已经有了，但是一些细节还需要完善，比如说调节窗口时对应弹出层位置变化等，还有更多处理bugger的地方尚未解决！我的博客里有对应源码下载！

0 0