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>
		var myDiv = null;
		function popup() {
			var popupEng = new simplePopup();
			if(myDiv == null) {
				myDiv = document.createElement("div"); = "3"; = "absolute";
				myDiv.innerHTML = "Click Black Background to Dismiss!"; = "#FFFFFF"; = "5px"; = "5px"; = "5px"; = "5px";
   = "block";

Try the demo: Click to open

Download HTML5 Popup Window Widget for Free

You can download this JS library for free.

Download JS Library

Previous PostNext Post

Leave a Reply

Your email address will not be published. Required fields are marked *