A Simple Colorbox CSS File

After searching around on the Internet for a modal dialog box I settled on ColorBox because out of all of the modal dialog boxes out there it has the most of the the capabilities that I was looking for. The only thing that I did not like about it was the title bar and close button at the bottom. Unfortunately there isn't a setting for ColorBox to not show this section but I did find a way to eliminate it by changing the style sheet.The following CSS will do this for you. Just copy it and use it as your "colorbox.css" file. To simplify things I just used a plain solid box (mborder.png) for the border. All you have to do is supply your own image file.


The CSS:

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:1111; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

#cboxOverlay{background:#222;}
#colorbox{}
#cboxTopLeft{width:8px; height:8px; background:url(images/mborder.png) no-repeat 0 0;}
#cboxTopCenter{height:8px; background:url(images/mborder.png) repeat-x top left;}
#cboxTopRight{width:8px; height:8px; background:url(images/mborder.png) no-repeat 0 0;}
#cboxBottomLeft{width:8px; height:8px; background:url(images/mborder.png) no-repeat 0 0;}
#cboxBottomCenter{height:8px; background-color:black; background:url(images/mborder.png) repeat-x bottom left;}
#cboxBottomRight{width:8px; height:8px; background:url(images/mborder.png) no-repeat 0 0;}
#cboxMiddleLeft{width:8px; background:url(images/mborder.png) repeat-y 0 0;}
#cboxMiddleRight{width:8px; background:url(images/mborder.png) repeat-y 0 0;}
#cboxContent{background:#fff; overflow:visible;} 
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

Using this CSS in my application gave me a modal dialog box like this: