SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question div as pop up instead of window.open, IE 6/7 overlay png file problem

    When a link is clicked i want to show the content inside a pop up but this would be div tag.

    This sitepoint articles describes exactally what i need.
    http://www.sitepoint.com/article/cre...up-notes-dhtml

    I want to take this one step further, when the link is clicked i want to first display a overlay div taking the full height of the page and then show the actual content div. Both overlay and content divs would be created on the fly and inserted into the page.

    overlay css
    Code:
     
    #overlay{
    	z-Index:100;
    	top:0px;
    	left:0px;
    	background-image: url('/Popup/Images/overlay.png');
    }
    * html #overlay{
    	 background-color: #000;
    	 background-color: transparent;
    	 background-image: url('/Popup/Images/blank.gif');
    	 filter: progidDXImageTransform.Microsoft.AlphaImageLoader(src="/Popup/Images/overlay.png", sizingMethod="scale");
    	 /*got filter according to this (IE overlay png problem) 
    http://exterior.trevor.smith.name/20..._fix_prob.html
    used for sizingMethod scale and image both*/
    }
    the overlay will be created and added as follows
    Code:
     
    function Overlay(){
    	var objBody = document.getElementsByTagName("body").item(0);
    	//create and apply some styles to overlay, others are coming from the css
    	var objOverlay = document.createElement("div");
    	objOverlay.setAttribute('id','overlay');
    	objOverlay.style.display = 'none';
    	objOverlay.style.position = 'absolute';
    	objOverlay.style.width = '100%';
    	objOverlay.style.display = 'none';
    	//insert the overlay div as the first child of the body
    	objBody.insertBefore(objOverlay, objBody.firstChild);
     
    	objOverlay.style.height = '100%';
    	//show the overlay block
    	objOverlay.style.display = 'block';
    }
    this is working in FF but not in IE6/7. What am i doing wrong here and how can i fix it.

    Here is my actual page
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link href="/'/Popup/CSS/Popup.css" rel="stylesheet" type="text/css">
    <title>New Page 1</title>
    </head> 
    <body>
     
    <A href="javascript:Overlay()">show overlay</a> <br/>
    <a href="javascript:HideOverlay()">hide overlay</a>
    </body>
    </html>
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doct type problem for IE, if the doc type is changed from

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    To
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    overlay image shows in IE.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •