A few people have asked me how to implement the div popup with a LightBox effect, like the one used when you click the Filter by APML link in the top right corner of this page. It’s actually very easy and it’s 100% JavaScript.

First, we need to add the semi-transparent div to lie on top of the entire page. This is done like so:

var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

var layer = document.createElement('div');
layer.style.zIndex = 2;
layer.id = 'layer';
layer.style.position = 'absolute';
layer.style.top = '0px';
layer.style.left = '0px';
layer.style.height = document.documentElement.scrollHeight + 'px';
layer.style.width = width + 'px';
layer.style.backgroundColor = 'black';
layer.style.opacity = '.6';
layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
document.body.appendChild(layer); 

Next we add a div in the middle of the page on top of the semi-transparent layer.

var div = document.createElement('div');
div.style.zIndex = 3;
div.id = 'box';
div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
div.style.top = '200px';
div.style.left = (width / 2) - (400 / 2) + 'px'; 
div.style.height = '50px';
div.style.width = '400px';
div.style.backgroundColor = 'white';
div.style.border = '2px solid silver';
div.style.padding = '20px';
document.body.appendChild(div); 

And finally we put some text and a link that closes the popup when clicked:

var p = document.createElement('p');
p.innerHTML = 'Some text';
div.appendChild(p);

var a = document.createElement('a');
a.innerHTML = 'Close window';
a.href = 'javascript:void(0)';
a.onclick = function()
{
  document.body.removeChild(document.getElementById('layer'));
  document.body.removeChild(document.getElementById('box'));
};
 
div.appendChild(a);

I’ve tested this in Firefox 2+, Internet Explorer 6+, Safari 3 and Opera 9.23+ and it works in all of them. Here is an example HTML page that uses this method. It's very simple to copy and modify.

A few hours ago, IE 8 beta 1 was released for download. The first impression is really good although it renders a bit differently which probably is a good thing due to standard compliance. One of the new features is called Activities and is a way for web developers to create content that lives outside their own website.

 

 

I’ve just written an Activity that let IE 8 users right click on any web page and select Blog with BlogEngine.NET. IE 8 then takes you to the Add entry page of your blog and inserts the title and link from the page into the editor. This is done only by using XML and JavaScript. You can see the XML file here.

You too can add a Blog with BlogEngine.NET to your IE 8 by using this little form. Just type in your website URL and push the button. Remember that you need to have IE 8 beta 1 installed for it to work.

You’ll find more information about writing Activities in this PDF document. Other information about IE 8 can be found at the IE 8 welcome page.