About Me

My photo
Nadiad, Gujarat, India
Hi Friends I am Vipul Soni, an Innovative web Designer & Developer with Excellent skills who thrives on challenges and is passionate for all areas of web Design & Development.

Friday, 18 February 2011

pop up window with HTML & Java script

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="" />
&nbsp;&nbsp;&nbsp;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

2 comments:

Alpesh said...

nice work yaar...keep it up...:)

djbriancabalic said...

Hello - can you teach me how to clear the data on the popup form, when the viewer clicks Exit? I have multiple popup buttons on a page, that call a music play list. When I click EXIT, and then click a new popup button, it calls the playlist from the previous click. So, that tells me I need to clear the data when the viewer clicks EXIT on the popup window. Thanks for your help!

Post a Comment

There was an error in this gadget