How to Block the Page, When Data is Submitting.

Introduction:

To Block the Page when Data is Submitting, we have various options, Either we can use Ajax based UpdateProgress or some jQuery Stuff. But sometime Ajax UpdateProgress not very useful because of complexity. So, the better approch appoach is to use jQuery UI Block Plug-In.

Implementation:

Download jQuery UI Block Plugin from : http://www.malsup.com/jquery/block/

<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>

  $("#<%= btnSubmit.ClientID%>").click(function() {

 $.blockUI({
                            message: "<h3>Processing, Please Wait...</h3>" ,
                            css: {
                                border: 'none',
                                padding: '15px',
                                backgroundColor: '#000',
                                '-webkit-border-radius': '10px',
                                '-moz-border-radius': '10px',
                                opacity: .5,
                                color: '#fff' 
                 }  });

});

The above code is simple code without any AJAX or other complex script.

Ref:  http://www.malsup.com/jquery/block/