Here is the html file : -
-------
<html>
<head>
<title>Popup Window</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src="popup-window.js"></script>
</head>
<body>
<h3>Popup Window</h3>
<!-- ------ Form ----- -->
<form action="" onsubmit="return false;">
<div>
<input type="button" value="Top-Left"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-top-left', 20, 20);" />
<input type="button" value="Center"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center', 0, 0);" />
<input type="button" value="Bottom-Right"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-bottom-right', -20, -20);" />
<input type="button" value="Mouse"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" />
<input type="button" value="Bottom" id="pos_bottom"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-bottom', 0, 10, 'pos_bottom');" />
<input type="button" value="Right" id="pos_right"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-right', 10, 0, 'pos_right' );" />
<input type="button" value="Default"
onclick="popup_show('popup', 'popup_drag', 'popup_exit');" />
</div>
</form>
<!-- -------- Popup Window -------- -->
<div class="sample_popup" id="popup" style="display: none;">
<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit" id="popup_exit" src="form_exit.png" alt="" />
Login
</div>
<div class="menu_form_body">
<form action="sample.php">
<table>
<tr><th>Username:</th><td><input class="field" type="text" onfocus="select();" name="username" /></td></tr>
<tr><th>Password:</th><td><input class="field" type="password" onfocus="select();" name="password" /></td></tr>
<tr><th> </th><td><input class="btn" type="submit" value="Submit" /></td></tr>
</table>
</form>
</div>
</div>
</body>
</html>
-------
<html>
<head>
<title>Popup Window</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src="popup-window.js"></script>
</head>
<body>
<h3>Popup Window</h3>
<!-- ------ Form ----- -->
<form action="" onsubmit="return false;">
<div>
<input type="button" value="Top-Left"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-top-left', 20, 20);" />
<input type="button" value="Center"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center', 0, 0);" />
<input type="button" value="Bottom-Right"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-bottom-right', -20, -20);" />
<input type="button" value="Mouse"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" />
<input type="button" value="Bottom" id="pos_bottom"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-bottom', 0, 10, 'pos_bottom');" />
<input type="button" value="Right" id="pos_right"
onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-right', 10, 0, 'pos_right' );" />
<input type="button" value="Default"
onclick="popup_show('popup', 'popup_drag', 'popup_exit');" />
</div>
</form>
<!-- -------- Popup Window -------- -->
<div class="sample_popup" id="popup" style="display: none;">
<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit" id="popup_exit" src="form_exit.png" alt="" />
Login
</div>
<div class="menu_form_body">
<form action="sample.php">
<table>
<tr><th>Username:</th><td><input class="field" type="text" onfocus="select();" name="username" /></td></tr>
<tr><th>Password:</th><td><input class="field" type="password" onfocus="select();" name="password" /></td></tr>
<tr><th> </th><td><input class="btn" type="submit" value="Submit" /></td></tr>
</table>
</form>
</div>
</div>
</body>
</html>
STYLE SHEET(sample.css) : -
-----------------------
div.sample_popup { z-index: 1; }
div.sample_popup div.menu_form_header
{
border: 1px solid black;
border-bottom: none;
width: 200px;
height: 20px;
line-height: 19px;
vertical-align: middle;
background: url('form_header.png') no-repeat;
text-decoration: none;
font-family: Times New Roman, Serif;
font-weight: 900;
font-size: 13px;
color: #206040;
cursor: default;
}
div.sample_popup div.menu_form_body
{
width: 200px;
border: 1px solid black;
background: url('form.png') no-repeat left bottom;
}
div.sample_popup img.menu_form_exit
{
float: right;
margin: 4px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup table
{
width: 100%;
border-collapse: collapse;
}
div.sample_popup th
{
width: 1%;
padding: 0px 5px 1px 0px;
text-align: left;
font-family: Times New Roman, Serif;
font-weight: 900;
font-size: 13px;
color: #004060;
}
div.sample_popup td
{
width: 99%;
padding: 0px 0px 1px 0px;
}
div.sample_popup form
{
margin: 0px;
padding: 8px 10px 10px 10px;
}
div.sample_popup input.field
{
width: 95%;
border: 1px solid #808080;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
div.sample_popup input.btn
{
margin-top: 2px;
border: 1px solid #808080;
background-color: #DDFFDD;
font-family: Verdana, Sans-Serif;
font-size: 11px;
}
JAVA SCRIPT(popup-window.js) : -
-----------------------------------
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
// popup mousedown
function popup_mousedown(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// popup_mousedown_window
function popup_mousedown_window(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
if ( ie && window.event.button != 1) return;
if (!ie && e.button != 0) return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else document.onmousedown = new Function("return false;");
}
// popup mousemove
function popup_mousemove(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
if (!popup_dragging) return;
element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// popup_mouseup
function popup_mouseup(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (!popup_dragging) return;
popup_dragging = false;
if (ie)
document.onselectstart = popup_oldfunction;
else document.onmousedown = popup_oldfunction;
}
// popup exit
function popup_exit(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.display = 'none';
}
// popup display
function popup_show(id, drag_id, exit_id, position, x, y, position_id)
{
var element = document.getElementById(id);
var drag_element = document.getElementById(drag_id);
var exit_element = document.getElementById(exit_id);
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
element.style.position = "absolute";
element.style.display = "block";
if (position == "element" || position == "element-right" || position == "element-bottom")
{
var position_element = document.getElementById(position_id);
for (var p = position_element; p; p = p.offsetParent)
if (p.style.position != 'absolute')
{
x += p.offsetLeft;
y += p.offsetTop;
}
if (position == "element-right" ) x += position_element.clientWidth;
if (position == "element-bottom") y += position_element.clientHeight;
element.style.left = x+'px';
element.style.top = y+'px';
}
if (position == "mouse")
{
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
element.style.top = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
}
if (position == "screen-top-left")
{
element.style.left = (document.documentElement.scrollLeft+x)+'px';
element.style.top = (document.documentElement.scrollTop +y)+'px';
}
if (position == "screen-center")
{
element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )/2+x)+'px';
element.style.top = (document.documentElement.scrollTop +(height-element.clientHeight)/2+y)+'px';
}
if (position == "screen-bottom-right")
{
element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth ) +x)+'px';
element.style.top = (document.documentElement.scrollTop +(height-element.clientHeight) +y)+'px';
}
drag_element['target'] = id;
drag_element.onmousedown = popup_mousedown_window;
exit_element.onclick = popup_exit;
}
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);
--------------------------------------------------------------------------
foe more detial or query leave your comment & follow the blog
Vipul Soni
