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 :3

  // 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 :)' );
      }
    });
  });