Display a centered floating element

To place a floating element on the page the element must have these CSS style parameter:

z-index:1 (or higher)
position:absolute

so if we place a floating centered DIV element on the page, with a thin red border, a white background and the id "myElement", the HTML code to paste to the document body is:

<div id='myElement' style='position:absolute;z-index:1;border:1px solid #f00;background-color:#fff'>Any html we want</div>

Using the function pasteRawHTML to append the html code to the existing page, we can place this code onto the page:

pasteRawHTML("<div id='myElement' style='"position:absolute;z-index:1;border:1px solid #f00;background-color:#fff'>Any html we want</div>",document.body);

This will place the element with id "myElement" at the bottom of the page. So now we can call on the function centerObject:

centerObject(document.getElementById("myElement"));

The element will now be centered on the page.

As this feature would desire a close button, we can call on the removeTheNode function and assign in to a close button, eg:

<span style="cursor:pointer" onclick="removeTheNode('myElement')">CLOSE</span>

so our full javascript can be:

To prevent the existing elements on the page, interfering with the actions of the user, we can place a transparent element over the page, but below the floating element, by using the fading background function.

To see this example work, click here!