前言
最近要做一个弹窗效果，找了几个控件都不太符合，所以就干脆自己封装一个吧，现在就把代码和效果和大家分享一下；
样式表
.dialogWindow{
width:100%;
height:100%;
position: fixed;
top: 0;
left: 0;
background: rgb(0 0 0 / 15%);
z-index:9999;
display: flex;
align-items: center;
}
.dialogWindowNew_heard{
width:100%;
height:45px;
}
.dialogWindowNew_heard_title{
/* width: 100%; */
text-align: left;
font-size: 16px;
/* font-family: PingFang SC; */
font-family: ‘Microsoft YaHei’, ‘微软雅黑’, ‘SimSun’, ‘宋体’;
font-weight: bolder;
color: #686868;
margin-top: 10px;
letter-spacing: 1px;
margin-left: 20px;
}
.dialog_window_close{
position: absolute;
cursor: pointer;
right: 20px;
top: 10px;
border-radius: 50%;
/* padding: 4em 4em 1em 1em;*/
}
.windowNew_close img{
width:1.5em;
height:1.5em;
}
.dialogWindow_body{
width:100%;
height:100%;
/*border:4px transparent;*/
flex:1;
/*border-radius: 1em;*/
position: relative;
/*background: linear-gradient(#0058A6, #fff);*/
/* padding: 4px; */
/*box-sizing: border-box;*/
display: flex;
/*flex-direction: column;*/
/* border-image: -webkit-linear-gradient(#1122FF,#fff) 30 30;
border-image: -moz-linear-gradient(#1122FF,#fff) 30 30;
border-image: linear-gradient(#1122FF,#fff) 30 30; */
border-top: solid 1px #e4e4e4;
/* border-bottom: solid 1px #e4e4e4; */
padding-left: 10px;
padding-right: 10px;
}
.dialogWindow_body::after{
position: absolute;
top: -4px; bottom: -4px;
left: -4px; right: -4px;
background: linear-gradient(red, blue);
content: ”;
z-index: -1;
border-radius: 16px;
}
.dialogWindowMain{
width:800px;
height:600px;
background:#fff;
position:relative;
border: solid #a5a5a5 1px;
box-shadow: 2px 2px 10px #a5a5a5;
margin:0 auto;
/* margin-top: 5%; */
/*padding: 2em 3em 1em 3em;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 10px;
}
.dialogBodyMsg{
width:100%;
flex:1;
background:#fff;
border-radius: 1em;
}
.windowFooter{
width:100%;
padding: 0.5em 2em;
display: block;
box-sizing: border-box;
}
.windowFooter span{
display: inline-block;
padding:0.2em 1em 0.3em 1em;
line-height:1.5em;
margin:auto;
border-radius: 20px;
color:#fff;
cursor: pointer;
}
.full{
flex:1;
}
.stand{
width:2em;
}
.reset{
background: #EA6748;
}
.pre{
background: #35B270;
}
.submit{
background: #0058A6;
}
.none{
display: none;
}
.dialogFormButtonFooter{
width: 100%;
height:44px;
/* background-color:#cccccc; */
text-align: right;
}
.dialogFormButtonFooter button{
float:right;
margin-right: 20px;
margin-top: 10px;
}
JS
/**
* 弹出框
*/
(function($){
$.MyDialog = function(option){
var winWidth = $(window).width();
var winHeight = $(window).height();
var id = parseInt(10000*Math.random());//窗口ID
var title = option.title;//窗口名称
var width = option.width;//窗口的宽度
if(width > winWidth){
width = width -(width-winWidth);
}
var height = option.height;//窗口的高度
if(height > winHeight){
height = height – (height-winHeight);
}
var url = option.url;//窗口内容路径
var windowNew = $(”);
var windowMain = $(”);
var heard = ”;
heard += ”+title+”;
heard += ”;
windowMain.append(heard);
var bodyMsg = ”;
bodyMsg += ”;
bodyMsg += ”;
bodyMsg += ”;
bodyMsg += ”;
windowMain.append(bodyMsg);
var footer = ”;
footer +=”;
windowMain.append(footer);
var close = ”;// onclick=”closeWindow(‘+id+’)”
close += ‘
‘;
close += ”;
windowMain.append(close);
windowNew.append(windowMain);
var windowNewObj = $(windowNew);
windowNewObj.find(“#winIframe”+id)[0].dialogId = id;
windowNewObj.find(“#winIframe”+id)[0].opt = option;
//关闭窗口
windowNewObj.find(“.dialog_window_close”).click(function(){
if(typeof($(“#winIframe”+id)[0].contentWindow.close()) == “undefined”){
$(‘#’+id).remove();
}
else{
$(“#winIframe”+id)[0].contentWindow.close();
}
})
windowNewObj.find(“.dialogWindowMain”).draggable({
onBeforeDrag : function (e) {
if(e.toElement.className != ‘dialogWindowNew_heard’ && e.toElement.className != ‘dialogWindowNew_heard_title’){
return false;
}
},
onStartDrag : function (e) {
if(e.toElement.className == ‘dialogWindowNew_heard’ || e.toElement.className == ‘dialogWindowNew_heard_title’){
var distanceX= e.offsetX;
var distanceY= e.offsetY;
var divLeft= e.clientX- distanceX;
var divTop = e.clientY- distanceY;
var maxLeft= document.documentElement.clientWidth- this.offsetWidth;
var maxTop = document.documentElement.clientHeight- this.offsetHeight;
if(divLeft<0){
divLeft=0;
}
if(divTop<0){
divTop=0;
}
if(divLeft> maxLeft){
divLeft= maxLeft;
}
if(divTop >maxTop){
divTop= maxTop;
}
if(divLeft == 0){
this.style.left= e.clientX+”px”;
}
else{
this.style.left= divLeft+”px”;
}
this.style.top = divTop+”px”;
}
else{
return false;
}
},
onDrag : function (e) {
//alert(‘拖动过程中触发！’);
},
onStopDrag : function (e) {
//alert(‘在拖动停止时触发！’);
}
});
$(‘body’).append(windowNewObj);
};
})(jQuery);
调用方式
$.MyDialog({
title:’图片’,
width:1000,
height:500,
url:页面地址,
})
依赖
jQuery
最终效果
以上是整个弹窗的源码，有很多不足，大家可以相互交流学习一下。