First Popup Div

**nichemtktg** · Dec 4, 2011 12:13

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)?

HTML Code:

<!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>

**nichemtktg** · Dec 4, 2011 13:27

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:

HTML Code:

<!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>

**nichemtktg** · Dec 4, 2011 13:42

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?

HTML Code:

<!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>

**sdleihssirhc** · Dec 4, 2011 13:52

In order to get the box to show, you can update the display property of its style object:

Code JavaScript:

function popup() {
    var myDiv = document.getElementById('firstPopupDiv');
    myDiv.style.display = 'block'; // no more document.write! :D
}

But while you're learning, here are a few other suggestions:

Are you using XHTML or HTML? XHTML is supposed to be a subset of XML. That's why XHTML documents have an xmlns attribute on their <html> node. However, you're using an HTML4 doctype. (Yes, this is an absurdly unimportant point.)
Don't use the "language" attribute. There's no need for it. (Again, kind of silly, but there you go.)
Move the <script> to the bottom of the <body>. There are various reasons for this, but the most relevant in this case is that we're going to be messing with the DOM, and this is the easiest way to ensure that the DOM is available.
Don't use HTML's "onclick". Again, there are various reasons for this, but it's mostly because it is ugly and an affront unto the Front End Lord. The problem is that events are really complicated in JavaScript. For simplicity, simply use an event handler:
Code JavaScript:
```
function popup() { /* ... */ }
var myLink = document.getElementsByTagName('h1')[0].
    getElementsByTagName('a')[0]; // using an id would (obviously) be easier here
myLink.onclick = popup;
```

**webdev1958** · Dec 4, 2011 14:07

Off Topic:

Originally Posted by sdleihssirhc

Don't use HTML's "onclick". Again, there are various reasons for this, but it's mostly because it is ugly and an affront unto the Front End Lord. The problem is that events are really complicated in JavaScript. For simplicity, simply use an event handler:

Not sure what you're on about here.

In this case the event handler is the popup() function which is called when an onclick event is triggered.

The only question then is whether the event handler should be assigned directly in the html or separately in the javascript. Yes, inline javascript is generally frowned upon nowadays, but since the op is learning the basics there is nothing wrong with assigning the onclick in the html, especially if you want to KISS

**nichemtktg** · Dec 4, 2011 17:01

This is what i have so far. How do I get the inner div to align vertically? I cant get vertical-align:middle; to work.

HTML Code:

<!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>

User Tag List

Thread: First Popup Div

Thread Tools

Display

First Popup Div

Bookmarks

Bookmarks

Posting Permissions