分享 | 一款自己封装的可拖拽弹窗控件
前言
最近要做一个弹窗效果，找了几个控件都不太符合，所以就干脆自己封装一个吧，现在就把代码和效果和大家分享一下；
样式表
.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 += '
以上是整个弹窗的源码，有很多不足，大家可以相互交流学习一下。
