Fancybox Onload Popup

by grant

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<p>Popup Test</p>
<div id="consolPopup">
    	<h1>For Your Information</h1>

        <p>Here is some text to fill out this space.</p>
</div>

CSS

#consolPopup {
    display:none;
    width:400px !important;
    margin:0;
    padding:0;
}
#consolPopup h1 {
    text-align:center;
    margin:0;
    padding:10px;
    text-align:
    center;
    color:#fff;
    margin-bottom:10px;
    background: #3275ae;
    /* Old browsers */
    background: -moz-linear-gradient(top, #3275ae 0%, #005093 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3275ae), color-stop(100%, #005093));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3275ae 0%, #005093 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3275ae 0%, #005093 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3275ae 0%, #005093 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #3275ae 0%, #005093 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3275ae', endColorstr='#005093', GradientType=0);
    /* IE6-9 */
}
#consolPopup p {
    padding:10px;
}
.fancybox-skin {
    padding:0 !important;
}

JavaScript

$(document).ready(function () {
    $("#consolPopup").fancybox({
        'overlayShow': true
    }).trigger('click');
});