These days, I am working on HTML5 project. In the project, I need to popup a window with black background mask. When I click on the mask, the popup window will dismiss. This effect is quite simple but it may take time when we want to implement it again. So I put this HTML popup widget here. You can download this HTML5 widget for free.

Demo: Click Button to Popup Window with Black Background

In this demo, I will put an anchor link. When clicking on the link, a text field will popup. When clicking on the black background, the text field will dismiss.

<a onclick="popup()">Open</a>

Import the following javascript in the html:

	<script src="simplePopup.js"></script>
	<script>
		var myDiv = null;
		function popup() {
			var popupEng = new simplePopup();
			if(myDiv == null) {
				myDiv = document.createElement("div");
				myDiv.style.zIndex = "3";
				myDiv.style.position = "absolute";
				myDiv.innerHTML = "Click Black Background to Dismiss!";
				myDiv.style.backgroundColor = "#FFFFFF";
				myDiv.style.paddingTop = "5px";
				myDiv.style.paddingBottom = "5px";
				myDiv.style.paddingLeft = "5px";
				myDiv.style.paddingRight = "5px";
			}
			
            myDiv.style.display = "block";
			popupEng.popup(myDiv);
		}
	</script>

Try the demo: Click to open

Download HTML5 Popup Window Widget for Free

You can download this JS library for free.

Download JS Library