Vanilla JS QuickForm

qf2.js

class QF2 {
	
// based on MooTools QuickForm, created by Rick Hopkins
//<button onclick="QF = new QF2({title:'This is a Title',content:'Hello'});">QF Content</button>
//<button onclick="QF = new QF2({title:'This is a Title',url:'https://testing0.micore.us/qf2/form.html'});">QF Url</button>
//<button onclick="QF = new QF2({title:'This is a Title',url:'https://testing0.micore.us/qf2/form.html',data:{key:'value'}});">QF Url with Post Data</button>

	constructor (opts) {
	// clear all previously made QuickForms
        var qf = document.querySelector('.quickform');
		if(qf) qf.parentNode.removeChild(qf);
        
		this.id='QuickForm_' + Math.random(0, 10000);
        this.title='';
        this.url = false;
        this.content = false;
        this.data= {};
        this.width='600px';
        this.onComplete=false;
		this.left = 'calc(50% - ' + this.width + '/2)';
		this.top = '150px';
  		this.cstyle = `		               
            .quickform {position:fixed;z-index:6;
            top: ` + this.top +`;
			left: ` + this.left + `;
			width: ` + this.width  +`;
			max-width:96vw;height:auto;min-height:80px;max-height:80vh;overflow:auto;margin:0;padding:0px;
            background:#eee;
            border-radius:6px; border:1px #ccc solid;
            box-shadow:0 5px 10px rgba(0,0,0,0.2);
          	}
			.quickform-title {padding:4px;text-align:center;font-weight:bold;font-size:1.2em;background:#eee;border-bottom:1px #ccc solid}
			.quickform-close {position:absolute;top:2px;right:2px;height:auto;width:auto;padding:4px 8px;text-align:right;border:0}
			.quickform-close:hover {background:#fff}
			.quickform-body {padding:1em}
		`;
		this.setOptions(opts);
		this.createDiv(); 
	
	}

	setOptions(opts){
		if (!opts.url && !opts.content) return false;
		if(opts.content!=undefined) this.content = opts.content; 
		if(opts.title!=undefined) this.title = opts.title; 
		if(opts.url!=undefined) this.url = opts.url;
		if(opts.data!=undefined) { this.data = opts.data; console.log(opts.data); };
		
		console.log('body:' + this.content);
		console.log('title:' + this.title);
	
	}

// create the banner
	createDiv(){
		var bodytag = document.getElementsByTagName('body')[0];
    	var style = document.createElement('style')
		style.innerHTML = this.cstyle;
		bodytag.insertBefore(style,bodytag.firstChild);
		
		var div = document.createElement('div');
		div.setAttribute('role','alertdialog');
		div.setAttribute('class','quickform');
		div.setAttribute('id',this.id);
		
		var titlediv = document.createElement('div');
		titlediv.setAttribute('class','quickform-title');
		titlediv.innerHTML = this.title;
		
		var closebutton = document.createElement('button');
		closebutton.setAttribute('class','quickform-close');
		closebutton.addEventListener("click", function(){ QF.close(); });
		closebutton.innerHTML = 'x';
		
		titlediv.appendChild(closebutton);
		
		div.appendChild(titlediv);
		
		var qfbody = document.createElement('div');
		qfbody.setAttribute('class','quickform-body');
		qfbody.innerHTML = this.content;
	// load remote content
		if(this.url) {
			 const formData = new FormData();
			 if(this.data) {
				Object.entries(this.data).forEach(([key, value]) => {
					formData.append(`${key}`,`${value}`);
					console.log(`${key} ${value}`);
				});

			}
			fetch(this.url,{method:"POST", body:formData})
			.then((response) => { return response.text(); })
			.then((html) => { qfbody.innerHTML = html; })
			.catch(function(err) { console.log('Fetch Error', err); });
		}
		div.appendChild(qfbody);
		
		bodytag.insertBefore(div,bodytag.firstChild); 
	}	
	
		
	close() {
		var element = document.getElementById(this.id);
		element.parentNode.removeChild(element);
		console.log('remove');
	}
}