First Popup Div - Solved With Thanks For A Particularly Good Topic

niche · December 4, 2011

I can't figure out what to put in the function to make id="firstPopupDiv" to display. What method should I use? Is my script setup right to popup the nondisplayed div (except for the empty function)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><script type="text/javascript">function popup(popup_name) {}</script><style type="text/css"></style></head><body><div id="firstPopupDiv" style="display:none;"><p>You are here.</p></div><h1><a href="#" onclick="popup('firstPopupDiv')">Click Here To Open The Pop Up</a></h1></body></html>

niche · December 4, 2011

It's ugly, but it works and I'm learning. How do I get the 100 x 100 red background to display and how do I get the popup to display for more than a second? My work so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><script language=javascript type='text/javascript'>function popup(popup_name) {var myDivId = document.getElementById('firstPopupDiv');document.write(myDivId.innerHTML);}</script><style type="text/css"></style></head><body><div id="firstPopupDiv" style="width:100px;height:100px;background-color:red;display:none;"><p>You are here.</p></div><h1><a href="#" onclick="popup()">Click Here To Open The Pop Up</a></h1></body></html>

niche · December 4, 2011

Have a much improved script, but still a work in progress. I thought it would be displayed out of the flow like a true popup. So, I put in some positioning, but it's still displacing the link. How should I change my thinking to keep the link from moving and make the popup act like a true js popup?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><script language=javascript type='text/javascript'>function popup(popup_name) {document.getElementById(popup_name).style.display = 'block';}</script><style type="text/css"></style></head><body><h1 style="float:left;"><a href="#" onclick="popup('firstPopupDiv')">Click Here To Open The Pop Up</a></h1><div id="firstPopupDiv" style="width:100px;height:100px;background-color:red;display:none;margin:40px 0px 0px 0px;"><p>You are here.</p></div></body></html>

JamesB · December 4, 2011

you can use css position absolute:

var div = document.getElementById(popup_name);div.style.display = 'block';div.style.position = 'absolute';div.style.left = '50%';div.style.top = '50%';div.style.marginLeft = '-50px'; // - half widthdiv.style.marginTop = '-50px'; // - half height

thescientist · December 4, 2011

What I usually do is create the element and put it first or last in the markup with eveything you would need it, links, images, etc, and then style the container using CSS giving it absolute positioning and initially set to display none. The I just use Javascript to show/hide it or update any of the data.

dsonesuk · December 4, 2011

This is a simple poup-up script for vertical and horizontal aligned box.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function popup(popup_name) {popup_elem=document.getElementById(popup_name);popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';}/*--*//*]]>*/</script><style type="text/css">#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}#firstPopupDiv {width:100px;height:100px;background-color:red;margin:40px 0px 0px 0px;}</style><!--[if IE]> <style>#outer {filter: alpha(opacity = 75);} </style><![endif]--><!--[if lte IE 7]> <style>  /* centering for ie6/ie7 */  .middle { position:absolute; top:50%; left:50%; height:auto;  z-index:999;}  .inner { position:relative; top:-50%; left:-50%; } </style><![endif]--></head><body><h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1><div id="outer" onclick="popup('outer')"><div class="middle"><div class="inner"><div id="firstPopupDiv"> <p>You are here.</p></div></div></div></div></body></html>

niche · December 4, 2011

Thanks dsonesuk. What is popup_elem doing? It's not a variable. What is it please?

dsonesuk · December 4, 2011

popup_elem is a short variable reference to document.getElementById(popup_name); which is tidier, and saves you usingdocument.getElementById(popup_name).style.display == 'block' ? document.getElementById(popup_name).style.display = 'none' : document.getElementById(popup_name).style.display = 'block';

niche · December 4, 2011

Thanks again. I took some liberty and came up with this. How do I get the inner div to vertically align?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><script language=javascript type='text/javascript'>function popup(popup_name) {document.getElementById(popup_name).style.display ='block';}</script><style type="text/css">#firstPopupDivOuter {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75;}#firstPopupDivInner{width:100px;height:100px;background-color:white;vertical-align:middle;margin: 0 auto;}</style></head><body><div id="firstPopupDivOuter" >  <div id="firstPopupDivInner" >    <a href="http://localhost/first_popup_div.html">close popup</a>    <p>You are here.</p>  </div> </div><h1 style="float:left;"><a href="#" onclick="popup('firstPopupDivOuter')">Click Here To Open The Pop Up</a></h1></body></html>

dsonesuk · December 4, 2011

by using three div elements, styled exactly the same as outer, middle, and inner? as used in my example.

niche · December 4, 2011

Touche. What's the difference between changing this:

function popup(popup_name) {popup_elem=document.getElementById(popup_name);popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';}

To this:

function popup(popup_name) {document.getElementById(popup_name).style.display ='block';}

The script seems to works both ways. Or does it? Am I giving-up something important?

JamesB · December 4, 2011

the first one will toggle between showing and hiding the element, every time popup() is called.the 2nd one will only show the element, every time popup() is called.

niche · December 5, 2011

OK. I get that "popup_elem=document.getElementById(popup_name);" is a short variable reference. Can you please explain "popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';" in as much detail as possible?

dsonesuk · December 5, 2011

Its known as a ternary operator, it is listed as conditional operator at http://www.w3schools.com/JS/js_comparisons.asp. It operates similar to if else condition, simple description of supplied example if element display == 'none' ? use display='block' : else use display='none';

niche · December 5, 2011

So, i think it's basically it's a short form of:

if(popup_elem.style.display == 'block' ) {	  popup_elem.style.display = 'none';} else {	  popup_elem.style.display = 'block';}

How does that toggle the popup?

niche · December 5, 2011

I think I just got it. (popup_elem.style.display == 'block') refers to display:none; in #outer right?

dsonesuk · December 5, 2011

you call the function, and pass to it a ref of the id you which to target: onclick="popup('firstPopupDivOuter')" so infunction popup(popup_name) { popup_elem=document.getElementById(popup_name);popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';} thepopup_name = 'outer' popup_elem = document.getElementById(popup_name); and popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block'; popup_elem.style.display == 'block' will check IF current element, with id ref passed to it 'outer' styling of display = 'block'popup_elem.style.display = 'none' IF it does! change to display = 'none'popup_elem.style.display = 'block'; anything ELSE change to display = 'block' Now, depending on how you set the pop-up, as with mine, the popup fills the entire screen and z-index:999; causes it to overlay over all other elements (h1, a) so you can't close it, if only the

<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1>

has the onclick pop-up function, but! by adding the onclick pop-up function call to the 'outer' element itself,

<div id="outer" onclick="popup('outer')">

it will check itself to determine if it showing (display:block;) and if so, set itself to hide (display:none;) by using the same ternary/ conditional operator within the function popup.

niche · December 5, 2011

This is a very very satisfying topic. Thanks so much for everyone's help especially dsonesuk. I think my final question is the role href="javascript:void(0);" plays. I can't find a reference on that notation. href="#" seems to do the same thing. What is href="javascript:void(0);" doing?

dsonesuk · December 5, 2011

"javascript:void(0); or "javascript:void(null); will act the same as using hash, But! it won't show the hash at the end of the url address when clicked.

Ingolme · December 5, 2011

It means "do nothing" almost literally. From experience, I believe it's better to never use the Javascript protocol in the href attribute. It's better to do this:<a href="#" onclick="popup('outer'); return false;">Pop up</a> The return false statement prevents the link from trying to open the URL.

niche · December 5, 2011

Thanks again for your help. Thanks to James B, thescientist, dsonesuk, and ingolme. Especially dsonesuk. I think popup divs are important for use on smart phones because they effectively double the size of the screen.

First Popup Div - Solved With Thanks For A Particularly Good Topic

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived