Prototype/Scriptaculous based modal window exemples

Let's start with a really simple exemple, using a given string as content.
Demo : Click here

new Modal({content: "Hello World"});        
      

Same exemple, without the cancel button button and reduced overlay opacity.
Demo : Click here

new Modal({content: "Hello World", cancelButton: false, overlay: 0.3});
      

Now let's add some custom callbacks.
Demo : Click here

new Modal({
  content: "Hello World", 
  opacity: 0.3,
  onCancelButton: function() { alert("Just clicked on cancel button !"); return true },
  onOkButton: function(){ this.shake({ duration: 5 }); return true }.bind(this),
  afterShow: function() { this.setStyle({ color: 'green' }); }.bind(this),
  afterClose: function() { this.setStyle({ color: '#E01B4C' }); }.bind(this)
});
      

What if I want to add some fancy effects when the window appears or disappears ?.
Demo : Click here

new Modal({
  content: "Hello World", 
  opacity: 1,
  showContainerEffect: function(self){ self.container.grow(); },
  showOverlayEffect: function(overlay, self){ 
    new Effect.Parallel([
      new Effect.BlindDown(overlay, { sync: true }), 
      new Effect.Opacity(overlay, { sync: true, from: 0, to: self.options.opacity }) 
    ], { duration: 1 });
  },
  hideOverlayEffect: function(overlay, self){ 
    new Effect.Parallel([
      new Effect.BlindUp(overlay, { sync: true }), 
      new Effect.Opacity(overlay, { sync: true, from: self.options.opacity, to: 0 }) 
    ], { duration: 1 });
  },
  closeEffect: function(self){ self.container.puff({ duration: 0.4, afterFinish: function(){ container.remove(); } }); }
});