BasicBox

Download BasicBox Zip

I have searched all over for a good and basic jQuery popup/modal.  Since I couldn’t find one that used basic jQuery calls, and supported under all jQuery versions I created my own.

The purpose of me posting this is to provide the code to the world.  The Scope of the code, is to be as simple as possible so to give you the control over the most  BasicBox you can get on the web.

Required Headers (for IE of course)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">

The Style:

<style> 
    body { margin: 0px; text-align:center; }
    #MainContainer { margin: 0 auto; text-align:left; width: 900px; }
    a:hover { cursor: pointer; } 

    .Mask { display: none; width: 100%; height: 100%; z-index: 9000; padding: 0px; margin: 0px; background: transparent url(/images/mask.png); 
        position: fixed; top: 0px; overflow: hidden; 
    }

    #popUp {
        width:400px; height:250px; background: #FFF;
        position:absolute; top:20%; left:50%;
    }
    #popTitle {
        width:100% ;font-weight:bold; text-align:right; margin-right: 15px; border-top:1px solid #CCC;
    }
    #popContent {
        text-align:left;
        padding: 10px;
    }
</style>

The BasicBox in hidding

<div onclick="HidePopUp();">
    <div id="popUp">
        <div id="popContent">
            This is the pop-up window
        </div>
        <div id="popTitle"><em><a onclick="HidePopUp();">(x) close</a> &nbsp;&nbsp;</em></div>
    </div>
</div>

JQuery stuff

<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
    function ShowPopUp(width, height){ 
        $('#popUp').css("width", width).css('margin-left', (width * -.5)).css('height', (height * 1) + 45);
        $('#popContent').css("min-height", (height * 1));
        $('.Mask').fadeIn('fast'); 
    }    
    function HidePopUp(){ $('.Mask').fadeOut('fast'); }    
    $(document).keyup(
        function (e) { if (e.keyCode == 27) {HidePopUp();} }
    );
</script>

Make it Display

<a onclick="ShowPopUp('500', '300');">Pop up a window</a>

Download BasicBox Zip

Leave a Reply

Your email address will not be published. Required fields are marked *