Showing Popup is the inevitable one in any kind of HTML based UI. If we want to show a html/aspx page as Popup, we can achieve this by using either Window.Showmodaldialog or Window.open. But most of the time our need is just to ask some inputs like username or mail id something like that. In HTML and JavaScript based applications, a DIV element is a very powerful HTML control that can be used to achieve to any complex UI design. In this article, I am going write and explain the example to Open Div as Popup using JavaScript and CSS without JQuery.
Open Div as Popup – HTML:
This is the example to ask Login credential through Div Popup. Here, we have the button control to call JavaScript function ‘OpenLoginPopup‘ to open loginDiv as Popup, the Div control which we are going to Show as Popup and the Close button it will call the JavaScript function ‘ClosePopupDiv’ to close the opened Popup.
This is the example to ask Login credential through Div Popup. Here, we have the button control to call JavaScript function ‘OpenLoginPopup‘ to open loginDiv as Popup, the Div control which we are going to Show as Popup and the Close button it will call the JavaScript function ‘ClosePopupDiv’ to close the opened Popup.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Div as Popup using JavaScript</title>
<!-- Use below CSS here -->
<!-- Use below JavaScript here -->
</head>
<body>
<input type="button" value="Open Popup" onclick="OpenLoginPopup()" />
<!-- Login Div to show Popup-->
<div id="loginDiv" style="display: none">
<label>
User name:</label><input id="tbUser" type="text" /><br />
<label>
Password:</label><input id="Text1" type="password" /><br />
<input type="button" value="Close" style="background-color: #3D72C0" onclick="ClosePopupDiv('loginDiv')" /><br />
</div>
</body>
</html>
Open Div as Popup – JavaScript:
Here, we have three JavaScript functions, OpenLoginPopup it will set popupsettings for loginDiv, ShowPopup is a general function to Show any given div as Popup, and ClosePopupDiv to close the opened Div Popup.
Here, we have three JavaScript functions, OpenLoginPopup it will set popupsettings for loginDiv, ShowPopup is a general function to Show any given div as Popup, and ClosePopupDiv to close the opened Div Popup.
<script type="text/javascript">
function OpenLoginPopup() {
var divToOpen = "loginDiv";
var popupSetting = { width: '250', height: '130', title: 'Login Dialog',isFixed:true };
ShowPopup(divToOpen, popupSetting);
}
// Function to Show Div Popup
function ShowPopup(divId, popupSetting) {
var divElt = document.getElementById(divId);
divElt.style.display = 'block';
var element = divElt.parentElement;
popupSetting = popupSetting || {};
if (!popupSetting.width) { popupSetting.width = divElt.offsetWidth };
if (!popupSetting.height) { popupSetting.height = divElt.offsetHeight };
if (!popupSetting.title) { popupSetting.title = 'Dialog' };
var table = document.createElement('table');
table.setAttribute('id', 'table' + divId);table.setAttribute('cellspacing', '0');table.setAttribute('cellpadding', '0');
var tr1 = document.createElement('tr'); tr1.className = 'PopupHeader';
var td1 = document.createElement('td'); td1.setAttribute('style', 'width: 90%; padding: 5px;');
var span = document.createElement('span'); span.innerHTML = popupSetting.title;
span.setAttribute('style', 'font-size: 14px; font-weight: bold;');
td1.appendChild(span); tr1.appendChild(td1); table.appendChild(tr1);
var tr2 = document.createElement('tr');
var tdDynamic = document.createElement('td');
tdDynamic.setAttribute('align', 'center');
tdDynamic.setAttribute('style', 'padding-top: 10px; vertical-align:top;');
var tempElt = document.createElement('div');
tempElt.setAttribute('id', 'tempElt' + divElt.id);
divElt.parentElement.insertBefore(tempElt, divElt);
tdDynamic.appendChild(divElt);
tr2.appendChild(tdDynamic);
table.appendChild(tr2);
var cssText = 'display: block; border:1px solid black; z-index:92000; background-color:white; top:50%; left:50%;';
cssText += 'width: ' + popupSetting.width + 'px; height: ' + popupSetting.height + 'px; margin-left: -' + Math.round(popupSetting.width / 2) + 'px; margin-top: -' + Math.round(popupSetting.height / 2) + 'px;';
if (popupSetting.isFixed === true) { cssText += 'position: fixed;';}
else { cssText += 'position: absolute;'; }
table.setAttribute('style', cssText);
element.appendChild(table);
var shadeElt = document.createElement('div');
shadeElt.id = "ShadedBG";shadeElt.className = "ShadedBG";
tempElt.appendChild(shadeElt);
}
// Function to Close Div Popup
function ClosePopupDiv(divId) {
var table = document.getElementById('table' + divId);
var element = table.parentElement;
var divElt = document.getElementById(divId);
divElt.style.display = 'none';
var tempElt = document.getElementById('tempElt' + divId);
tempElt.parentElement.insertBefore(divElt, tempElt);
table.parentElement.removeChild(table);
table.setAttribute('style', 'display: none');
tempElt.parentElement.removeChild(tempElt);
}
</script>
Show Div as Popup – CSS:
<style type="text/css">
.PopupHeader
{
color: white;
background-color: #3D72C0;
}
.ShadedBG
{
width: 100%;
height: 100%;
position: fixed;
z-index: 10000;
opacity: 0.3;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
background-color: #B8C6B8;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
</style>
Output: Open Div as Popup using JavaScript
Source File: Download HTML Source
Thanks,
Morgan
Software Developer
Advertisement
Its Worked for me… Thanks dude…