Member Avatar for dips255

I need a script to generate a popup when page loads with background disabled. Please help

  • 5 Contributors
  • 4 Replies
  • 3K Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by zeeshan88

Recommended Answers

All 4 Replies

Member Avatar for zhoush24

I need a script to generate a popup when page loads with background disabled. Please help

dfasdasdasd
asd
a
d
asd
asdasdasd
a
sd
asd
as
dasd

Member Avatar for essential

Try this simple demo of a custom popup:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
label + div {
margin-bottom : 1em; font : 700 16pt "Trebuchet MS", "Bernard MT Condensed", Verdana, Arial, sans-serif; }
-->
</style>
<script type="text/javascript">
<!--
var customPopup = function( w, h, elem ) {
   elem = (( document.getElementById ) ? document.getElementById( elem ) : document.all[ elem ] );
   var checked = true;
   var posTop;
   var posLeft;
   try {
      if ( document.body.scrollWidth ) {
      posLeft = document.body.scrollWidth;
      posTop = (( window.screen.availHeight ) ? screen.availHeight : document.body.scrollHeight );
      }
   } catch( error ) {
      if ( window.scrollMaxY ) {
      posLeft = window.scrollMaxX;
      posTop = window.scrollMaxY;
      } else {
      check = false;
      }
   } if ( checked ) { // You can implement more style rules from here.

   var divWidth = (( posLeft * w ) / 100 );
   var divHeight = (( posTop * h ) / 100 );
   elem.style.width = divWidth;
   elem.style.height = divHeight;
   elem.style.backgroundColor = "#eee";
   elem.style.border = "2px solid #405060";
   elem.style.position = "absolute";
   elem.style.left = Math.ceil((( posLeft - divWidth ) / 2 )) + "px";
   elem.style.top = Math.ceil((( posTop - divHeight ) / 2 )) + "px";
   }
};
window.onload = function() {
    customPopup( 40, 40, "main" );
}
// -->
</script>
</head>
<body>
<div id="main"><div style="padding : 1em; color : #405060; text-align : center"><h1 style="margin : 0 auto; padding : 0;">Custom Popup</h1></div></div>

</body>
</html>
Member Avatar for sakherdael

this is your code babe:

<HTML>
<HEAD>
<TITLE>PopUp Div + Background Disable</TITLE>
<style>
body
{
background-image:url("1.gif");
}
.parentDisable
{
z-index:999;
width:100%;
height:100%;
display:none;
position:absolute;
top:0;
left:0;
background-color: #000;
color: #aaa;
opacity: .4;
filter: alpha(opacity=50);
}
#popup
{
    width:300;
    height:300;
    position:relative;
    color: #000;
    background-color: #fff;
    top:25%;
    background-image:url(catbg-1.gif);

}
#close
{
position:absolute;
top:0;
right:0;
}
</style>
<script type="text/javascript">
function pop(div)
{
document.getElementById(div).style.display='block';
return false
}
function hide(div)
{
document.getElementById(div).style.display='none';
return false
}
</script>
</HEAD>
<BODY>
<div id="pop1" class="parentDisable">
<center>
<div id="popup">
This is popup 1
<a href="#" onClick="return hide('pop1')">
<div id="close">
<img src="close.png" width="40px" height="40px"/>
</div>
</a>
</div>
</div>



<center>
<h3>Simple Popup Div + Background Disable Example</h3>
</br></br>
<a href="#" onClick="return pop('pop1')">Popup 1</a>
</center>


</BODY>
</HTML>

if u need any thing i am ready for any thing.....
Good luck..

Eng.M.Dael
Professional Designer & Web Developer
(snip)

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for zeeshan88

Thanks, Eng.M.Dael, your popup with disabled background is working great for me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.