HTML structure:

 <input type="button" id="btn" value="Modal testing">Copy the code

CSS styles:

body{
	margin: 0;
	padding: 0;
}
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	background: # 000;
	opacity: .5;
}
.modal {
	width: 300px;
	background: #fff;position: fixed; overflow: auto; left: 50%; top: 50%; z-index: 100; border-radius: 4px; Box - shadow: 0 2 px 8 px rgba (, 0, 0, 2); } .modal-header { padding: 13px 16px; border-radius: 4px 4px 0 0; background:#fff;Color: rgba (0, 0, 65); border-bottom: 1px solid#e9e9e9;} .modal-body{ padding: 16px; font-size: 12px; The line - height: 1.5; } .modal-footer { border-top: 1px solid#e9e9e9;padding: 10px 16px 10px 10px; text-align: right; border-radius: 0 0 4px 4px; } .modal-btn { display: inline-block; margin-bottom: 0; font-weight: 500; text-align: center; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; The line - height: 1.15; padding: 0 15px; font-size: 12px; border-radius: 4px; height: 28px; user-select: none; position: relative; background-color:#fff;
    border-color: #d9d9d9;
}
.modal-btn, .modal-btn:active, .modal-btn:focus {
    outline: 0;
}
.modal-btn-primary {
    color: #fff;
    background-color: #108ee9;
    border-color: #108ee9;} .modal-close { cursor: pointer; border: 0; background: transparent; position: absolute; right: 0; top: 0; z-index: 10; font-weight: 700; line-height: 1; text-decoration: none; Color: rgba (0, 0,. 43); outline: 0; width: 48px; height: 48px; line-height: 48px; }Copy the code

Js interactive logic:

// Object-oriented drag and dropfunction Drag(){
    this.disX = 0;
    this.disY = 0;
};
Drag.prototype.init = function (element){
    this.element = element;
    var that = this;
    this.element.onmousedown =  this.downFn.bind(this)
};
Drag.prototype.downFn = function (ev){
    this.disX = ev.clientX - this.element.offsetLeft;
    this.disY = ev.clientY - this.element.offsetTop;
    document.onmousemove = this.moveFn.bind(this);

    document.onmouseup = this.upFn.bind(this);
};
Drag.prototype.moveFn = function (ev){
    this.element.style.left = ev.clientX - this.disX + 'px';
    this.element.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.upFn = function(ev){ document.onmousemove = null; }; /* Width width height left value left top value left top Determine trigger function okFn cancelFn whether drag isDrag content */ content class Modal{ Constructor (options){this.defaults={width:400, isDrag:false,
    title:'Here's the title.',
    content:'This is the content section.',
    okFn:null,
    cancelFn:function() {}}; Object.assign(this.defaults,options); // Merge the second Object of the argument into the first Object. //console.log(this.defaults); console.log(options); }; / / initializationinit(){ this.modalBox=this.createModalHtml(); document.body.appendChild(this.modalBox); this.maskBox=this.createMaskHtml(); document.body.appendChild(this.maskBox); this.setStyle(); // Set the style window.onresize= this.onresize. Bind (this); this.addEvent(); // Drag and drop:if(this.defaults.isDrag){ var d=new Drag(); d.init(this.modalBox); }};createModalHtml(){
    var div=document.createElement('div');
    div.className='modal';
    var html=`
    <button class="modal-close">X</button>
    <div class="modal-header">
        ${this.defaults.title}
    </div>
    <div class="modal-body">
        ${this.defaults.content}
    </div>
    <div class="modal-footer">
        <button class="modal-btn cancel"<span> </span> </button> <button class="modal-btn modal-btn-primary ok"</span> </button> </div> '; div.innerHTML=html;returndiv; }; // Close the modal box eventaddEventVar that=this; var close=this.modalBox.querySelector('.modal-close');
var ok=this.modalBox.querySelector('.ok');
var cancel=this.modalBox.querySelector('.cancel');
close.onclick=function(){
    that.modalBox.remove();
    that.maskBox.remove();
};
ok.onclick=function(){
    that.modalBox.remove();
    that.maskBox.remove();
    typeof that.defaults.okFn==='function' && that.defaults.okFn();
};
cancel.onclick=function(){
    that.modalBox.remove();
    that.maskBox.remove();
    typeof that.defaults.cancelFn==='function'&& that.defaults.cancelFn(); }; } // Set the stylesetStyle(){
    this.modalBox.style.width=this.defaults.width+'px';
    if('height' in this.defaults){
        this.modalBox.style.height=this.defaults.height+'px'; }; // If this. Defaults has left and top attributes, the defaults are left and topif('left' in this.defaults){
    this.modalBox.style.left=this.defaults.left+'px';
}else{this. ModalBox. Style. Left = (document. DocumentElement. ClientWidth - this. ModalBox. ClientWidth) * 0.5 +'px';
};
if('top' in this.defaults){
    this.modalBox.style.top=this.defaults.top+'px';
}else{this. ModalBox. Style. The top = (document. DocumentElement. ClientHeight - this. ModalBox. ClientHeight) * 0.5 +'px'; }}; // When the browser window size changesonResize(){ this.setStyle(); }; // Create a black background mask layercreateMaskHtml(){
    var div=document.createElement('div');
    div.className='mask';
    return div;
};
}
var btn=document.getElementById('btn');
btn.onclick=functionVar m=new Modal({width:500, isDrag:true,
    title:'Incoming title: Hello',
    okFn:function(){
        console.log("I hit ok. I'm going to do something.");
    },
    cancelFn:function(){
        console.log("I hit cancel. I'm going to do something.");
    },
    content:
 Incoming content: Spring is a bit long this year! 
 Incoming content: spring is a bit long this year! 
 Incoming content: spring is a bit long this year! 
 Incoming content: spring is a bit long this year! 
 Incoming content: spring is a bit long this year! 
'}); m.init(); };Copy the code