JSFiddle - React, Tailwind, and code Playground

by Craig Detter

HTML

<button onclick="showCustomModalDialog(this)">Show Dialog</button><br>
Some content
<div id="modal_position">
</div>
Some additional content

CSS

.modal_dialog
{
    box-sizing: border-box;
    background-color: #ededed;
    border-radius: 5px;
    border: 0.5px solid #ccc;
	  font-family: sans-serif;    
    left: 30%;
    margin-left: -50px;
    padding: 15px 10px 10px 5px;
    position: fixed;
    text-align: center;
    width: 320px;
}

JavaScript

var gCustomModalDialog = null;


/** Encapsulates a custom modal dialog in pure JS 
 */
class CustomModalDialog {
	
	/**
	 * Constructs the modal content
	 * @param htmlContent - content of the HTML dialog to show
	 * @param okayControlElementId - elementId of the okay button, image or control
	 * @param cancelControlElementId - elementId of the cancel button, image or control
	 * @param insertionElementId - elementId of the <div> or whatever tag to 
	 *            insert the html at within the document
	 * @param callbackOnOkay - method to invoke when the okay button or control is clicked.
	 * @param callbackOnCancel - method to invoke when the cancel button or control is clicked.
	 * @param callbackTag (optional) - to allow object to be passed to the callbackOnOkay 
	 *              or callbackOnCancel methods when they're invoked.
	 */	
	constructor(htmlContent, okayControlElementId, cancelControlElementId, insertionElementId,
						callbackOnOkay, callbackOnCancel, callbackTag) { 

		this.htmlContent = htmlContent;
		this.okayControlElementId = okayControlElementId;				
		this.cancelControlElementId = cancelControlElementId;
		this.insertionElementId = insertionElementId;
		this.callbackOnOkay = callbackOnOkay;
		this.callbackOnCancel = callbackOnCancel;
		this.callbackTag = callbackTag;
	}


	/** shows the custom modal dialog */
	show() {
		// must insert the HTML into the page before searching for ok/cancel buttons
		var insertPoint = document.getElementById(this.insertionElementId);		
		insertPoint.innerHTML = this.htmlContent;
		
		var okayControl = document.getElementById(this.okayControlElementId);
		var cancelControl = document.getElementById(this.cancelControlElementId);

		okayControl.addEventListener('click', event => {
  			this.callbackOnOkay(event, insertPoint, this.callbackTag);
		});
		cancelControl.addEventListener('click', event => {
  			this.callbackOnCancel(event, insertPoint, this.callbackTag);
		});
	} // end: method	
	
	
	/** hide the...