/    Sign up×
Community /Pin to ProfileBookmark

Javascript pop????

Copy linkTweet thisAlerts:
Mar 05.2008

Hi all,

Wondering if you could help me…..

I’m looking to create a really nice, NON intrusive pop-up for my site.

The pop-up needs to be able to stream a small flash video in it.

I sometimes see these on sites and not sure if there javascript, dhtml, some form of ajax or something different.

They kind of fade into the site and sit over top of the browser but dont actually create a new browser window if that makes sense. Its almost like a CSS layer.

Anyone know where i can find info on these types of pop us or a tutorial.

Thanks again
Dan

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@budsterMar 05.2008 — Hi Dan

Have a look at http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11450

it explains how to fade in/out a div element to look like a window.

hope it helps
Copy linkTweet thisAlerts:
@dandaman2007authorMar 05.2008 — almost perfect, thanks...........

Although, do you know how to change this script to start the popup "on page load" ????




<html>

<head>

<style type="text/css">

.popup {
border: solid 1px #333;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display: none;
position: absolute;
width: 300px;
z-index: 60;
}

.popuptitle {
background: blue;
color: white;
font-weight: bold;
height: 15px;
padding: 5px;
}

.popupbody {
background: #ddd;
padding: 5px;
text-align: center;
}

#popup { top: 100px; left: 50px; }

</style>

<script type="text/javascript">

//----------

function addEvent(obj ,evt, fnc)
{
if (obj.addEventListener)
obj.addEventListener(evt,fnc,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fnc);
else
return false;
return true;
}

function removeEvent(obj ,evt, fnc)
{
if (obj.removeEventListener)
obj.removeEventListener(evt,fnc,false);
else if (obj.detachEvent)
obj.detachEvent('on'+evt,fnc);
else
return false;
return true;
}

//----------

function appendElement(node,tag,id,htm)
{
var ne = document.createElement(tag);
if(id) ne.id = id;
if(htm) ne.innerHTML = htm;
node.appendChild(ne);
}

//----------

function showPopup(p)
{
greyout(true);
document.getElementById(p).style.display = 'block';
}

function hidePopup(p)
{
greyout(false);
document.getElementById(p).style.display = 'none';
}

//----------

function greyout(d,z)
{
var obj = document.getElementById('greyout');
if(!obj)
{
appendElement(document.body,'div','greyout');
obj = document.getElementById('greyout');
obj.style.position = 'absolute';
obj.style.top = '0px';
obj.style.left = '0px';
obj.style.background = '#111';
obj.style.opacity = '.5';
obj.style.filter = 'alpha(opacity=50)';
}
if(d)
{
if(!z){ z - 50 }
obj.style.zIndex = z;
obj.style.height = Math.max(document.body.scrollHeight,document.body.clientHeight)+'px';
obj.style.width = Math.max(document.body.scrollWidth,document.body.clientWidth)+'px';
obj.style.display = 'block';
addEvent(window,'resize',greyoutResize);
}
else
{
obj.style.display = 'none';
removeEvent(window,'resize',greyoutResize);
}
}

function greyoutResize()
{
var obj = document.getElementById('greyout');
obj.style.height = document.body.clientHeight+'px';
obj.style.width = document.body.clientWidth+'px';
obj.style.height = Math.max(document.body.scrollHeight,document.body.clientHeight)+'px';
obj.style.width = Math.max(document.body.scrollWidth,document.body.clientWidth)+'px';
}

//----------

</script>

</head>

<body>

<input type="button" value="Show Popup" onClick="showPopup('popup')"/>

<div id="popup" class="popup">
<div class="popuptitle">Modal Popup</div>
<div class="popupbody">
<p>No links or functionality on the main page should be accessible until this popup is closed.</p>
<input type="button" value="Hide Popup" onClick="hidePopup('popup')"/>
</div>
</div>

</body>

</html>
Copy linkTweet thisAlerts:
@budsterMar 05.2008 — Hi Dan

I'd imagine you'd change the onclick event on the button to an onload event on the body.
Copy linkTweet thisAlerts:
@dandaman2007authorMar 05.2008 — Worked like a charm......... thanks Budster, great help.

Another question if you have chance to answer!

Do you know if its possible to put a delay on the "<body onload>" function?

I kind of want the javascript to kick in after about 5 seconds.

Any further thoughts?

Thanks again mate.
Copy linkTweet thisAlerts:
@budsterMar 06.2008 — Hi Dan,

Take a look at setInterval command.
Copy linkTweet thisAlerts:
@dandaman2007authorMar 10.2008 — Thanks budster,

Yet again, very helpful!

on a side note, is there a way of seeing if this is cross browser compliant? is there any sites that has a code checker?

Thanks
Copy linkTweet thisAlerts:
@dandaman2007authorMar 14.2008 — on a side note, is there a way of seeing if this is cross browser compliant? is there any sites that has a code checker?
×

Success!

Help @dandaman2007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...