DIV in middle of screen

@vannyJun 15.2010

Hi All,

I am having a mental blank today. But basically I want to have a DIV popup in the middle of the screen. Not the page, so no matter how far down the extremely long page they scroll the div will just open and show the information that I want. a bit like using a window.open function without actually opening a completely new page.

I know it is something basic, but for the life of my cant get it to work.

Thanks for any pointers.

Vanny

to post a comment

CSS

@cbVisionJun 15.2010 — #

[CODE]<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Title</title>
 <meta name="language" content="en" /> 

 <meta name="description" content="" /> 

 <meta name="keywords" content="" />
 <style type="text/css">
 .box {width: 200px; height: 200px; background: #000; border: solid 3px #ccc; position: fixed; top: 50&#37;; left: 50%; margin-top: -100px; margin-left: -100px;}
 /* margin top should be half the height...margin left should be half the width */
 p {color: #fff; text-align: center; padding-top: 20px;}
 * html .box {position:absolute} /* ie6 hack */
 </style>
 <script type="text/javascript">
 //<![CDATA[ 
 
   //]]> 
   </script>
  </head>
  <body>
   <div class="box">
   <p>Centered Box</p>
   </div>
  </body>
 </html>[/CODE]

@Major_PayneJun 17.2010 — #You asked for a popup. Just use the code given on the popup HTML file and then set the popup link code for it. You might want to add a charter set tag.

@cbVisionJun 17.2010 — #Ah you did ask for a popup!

I've added some JavaScript to display the box.

[CODE]<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Title</title>
 <meta name="language" content="en" /> 

 <meta name="description" content="" /> 

 <meta name="keywords" content="" />
 <style type="text/css">
 .box {width: 200px; height: 200px; background: #000; border: solid 3px #ccc; position: fixed; top: 50&#37;; left: 50%; margin-top: -100px; margin-left: -100px; display: none;}
 p {color: #fff; text-align: center; padding-top: 20px;}
 * html .box { position:absolute }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
 //<![CDATA[ 

 $(document).ready(function(){
 $('#popup').click(function(){
 $('.box').fadeIn('slow');
 });
 $('#close').click(function(){
 $('.box').hide();
 });
 });
 //]]> 
 </script>
 </head>
 <body>
 <p><a href="#" id="popup">Show Box</p> 
 <div class="box">
 <p>Centered Box</p>
 <p><a href="#" id="close">Close</a></p>
 </div>
 </body>
 </html>[/CODE]

@Major_PayneJun 17.2010 — #? I also meant character set tag instead of "charter set".

DIV in middle of screen

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

DIV in middle of screen

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴