Bookmark and Share

Thursday, July 29, 2010

How To center “Coding Staff Popup” DNN module

If you need to show a simple popup message on your Dot Net Nuke site you can download and install the good “Coding Staff Popup”, here is the demo page.

Here is the nice modal popup created with this module:image

I found useful to override some behaviors like width, height, hide the title bar and reposition the popup, here is what to do:

1) Hide the title bar
Go to the module “Advanced Settings” and add to the Header section the code:

<style type="text/css">
.popup-window-header
{
display:none!important;
}
</style>


Image:
image

2) Resize the popup:
In the same section add the CSS style:
.jqmWindow
{
position:absolute!important;
width:1030px!important;
height:380px!important;
top:160px!important;
margin-left:0px!important;
}


3) Center the popup:
With JQuery you can easily reposition the popup using the exact window size, add to the “Advanced Settings” “Footer” the code:

<script language="javascript">
$('div[id*="popupDialog"]').css('left',($(window).width()/2)-($('.jqmWindow').width()/2));
</script>

Note that popupDialog and jqmWindow' are HTML elements created by the Popup module.

Here is the Picture of the module section:image

Here is the page before the patch :
image

And here is the result, popup aligned exactly to the center, title hidden with custom popup size.

image