jQuery MSG Plugin Demo

Default usage

          $.msg();
        

Custom content

          $.msg({ content : 'blah blah' });
        

Disable auto unblock

          $.msg({ autoUnblock : false });
        

Custom speed

          $.msg({ 
            fadeIn : 500,
            fadeOut : 200,
            timeOut : 5000 
          });
        

Switch theme

          $.msg({ klass : 'white-on-black' });
        

Custom theme

          $.msg({ klass : 'custom-theme' });
        

Replace content, events and manually unblock

I am the user

          
          // block the screen to show msg when click on #replace-content btn
          $( '#replace-content' ).bind( 'click', function(){
            $.msg({ 
              autoUnblock : false,
              clickUnblock : false,
              content: '<p>Delete this user?</p>' +
                       '<p class="btn-wrap">' + 
                         '<span id="yes">Yes</span>' + 
                         '<span id="no">no</span>' + 
                       '</p>',
              afterBlock : function(){
                // store 'this' for other scope to use
                var self = this;

                // delete user and auto unblock the screen after 1 second
                // when click #yes btn
                $( '#yes' ).bind( 'click', function(){

                  // self.method is not chainable
                  self.replace( 'User deleted.' );
                  self.unblock( 2000 );
                  // this equals to 
                  // $.msg( 'replace', 'User deleted.' ).
                  //   msg( 'unblock', 2000 );

                  $( '#the-user' ).empty();
                });

                $( '#no' ).bind( 'click', function(){

                  // this equals to $.msg( 'unblock' );
                  self.unblock();
                });
              },
              beforeUnblock : function(){
                alert( 'This is a callback from beforeUnblock event handler :)' )
              }
            });
          });