First Popup Div

JavaScript
1

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

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

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

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


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:

  1. 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.)
  2. Don’t use the “language” attribute. There’s no need for it. (Again, kind of silly, but there you go.)
  3. 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.
  4. 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:


    javascript function popup() { /* ... */ } var myLink = document.getElementsByTagName('h1')[0]. getElementsByTagName('a')[0]; // using an id would (obviously) be easier here myLink.onclick = popup;
5
Off Topic:

[/LIST]
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 :slight_smile:

6

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.


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