Javascript “popup” announcements via Div and PHP

My friend’s company has recently been hit by frauds claiming to be her franchises. To protect her company and image she asked me to code a notification for her site.

However announcements like theses are kind of ugly and irritating after a while and also nowadays browsers block out popups for browsers so we can’t put it into another page.

Then I came up with a nice solution, this not-so-elegantly coded in-line DIV announcement is simple and only uses standard javascript and CSS. Add in a little PHP to cause it to pop out only on 1st page view and no longer gets in the way after that.

 Click this link for DEMO. or visit actual site.

Download the code: Div announcement script demo code

Sample announcement div

Announcement on page


The code for your DIV

<div style=”height:570px; width:440px; border:1px solid #DDD; padding:8px; top:10px; left:50%; margin-left:-220px; position:absolute; background-color:#FFFFFF;” id=”announcement“>My Announcement goes here</div>

The red attributes can be modified to your required id/height/width. Also note the “margin-left” should be set to exactly HALF of the width that you changed, that would bring the announcement into the center of the screen.

The code for closing the DIV (Button)

<input type=”button” onclick=”document.getElementById(‘announcement‘).style.display=’none’;” value=”Close announcement”/>

Make sure the getElementById is your DIV id for the main announcement.


The PHP for loading the DIV at first visit. This needs to be place before any output on your script (ie before <html>).

//Part 1 placed before any output on screen.

$output_notice =1;

The 2nd part of the script should be placed any where near the top after the body block.

//Part 2 Announcement code


} //End if


2 Comments Say Something
  • Nice script…

    Would be nicer to dim the rest of the page when announcement pops up

  • Good post. I study one thing more difficult on ctelleompy different blogs everyday. It is going to always be stimulating to learn content from other writers and apply a bit one thing from their store. I’d choose to make use of some with the content material on my weblog whether you don’t mind. Natually I’ll give you a link on your web blog. Thanks for sharing.

Add A Comment