分享 | 一款自己封装的可拖拽弹窗控件

前言

最近要做一个弹窗效果，找了几个控件都不太符合，所以就干脆自己封装一个吧，现在就把代码和效果和大家分享一下；

样式表

.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

最终效果

以上是整个弹窗的源码，有很多不足，大家可以相互交流学习一下。

以上内容来源于网络，由“WiFi之家网”整理收藏！