jQuery BlockUI - Page or element overlay สร้าง Page Overlay แบบ Lightbox

<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="http://path/to/your/copy/of/jquery.blockUI.js"></script>
<script>
// invoke blockUI as needed -->
$(document).on('click', '#myButton', function() {
   $.blockUI();
});
></script>

$(document).ready(function() { 
    $('#demo2').click(function() { 
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 
 
        setTimeout($.unblockUI, 2000); 
    }); 
}); 

$(document).ready(function() { 
    $('#demo8').click(function() { 
        $.blockUI(); 
 
        setTimeout(function() { 
            $.unblockUI({ 
                onUnblock: function(){ alert('onUnblock'); } 
            }); 
        }, 2000); 
    }); 
}); 

$(document).ready(function() { 
   $('#demo12').click(function() { 
       $.growlUI('Growl Notification', 'Have a nice day!'); 
   }); 
});