mootools系列：打造属于你自己的Popup（弹出框）——外观及应用篇

     半透明化弹出框（Popup）边框

     半透明化的边框很眩吧。其实实现起来很简单，只需设置一css属性：opacity。opacity指“不透明度”，取值在0和1之间，0表示全透明，1表示完全不透明。

     在代码中，我将边框的不透明度设置为0.5。

1  document.id(newCell).setStyle('opacity', 0.5);

     弹出框（Popup）的淡入淡出效果

     知道了不透明度opacity这一css属性，相应的使弹出框的该属性值在0与1之间有一个渐变的过程，即为淡入。反之为淡出。

     在这里应用mootools中可控制任意css属性在两值之间过渡的tween类。

1  this.popupTable['tween']('opacity', '1');

     关闭弹出框时，我们需将其销毁。结合淡出效果，这个销毁的动作应发生在淡出效果完成时。代码如下：

1  tween: {
2     onComplete: function () {
3         if (this.popupTable.getStyle('opacity') == 0)
4             this._cleanUp();
5     }.bind(this)
6 }

     变身为alert

     javascript中alert函数的功能仅仅是简单的提示、告之。基于当前自定义弹出框已经具有的功能，是很容易实现的。

 1  function openAlert() {
 2     var newP = new iSunPopup({ width: 380, height: 150, title: 'iSun alert', content: 'iSun alert content',         buttons: [
 3                 {
 4                     text: 'Yes',
 5                     clickHandler: function () {
 6                         this.close();
 7                     }
 8                 }]
 9     });
10 
11     newP.open();
12 }

     变身为confirm

      javascript中的confirm函数较alert复杂。在应用中，用户可以选择confirm()的Yes或No，然后代码做出相应的处理。这一选择过程是运行阻塞的，javascript运行时停滞在这个地方来等待用户的处理。

     然而我们自定义的弹出框无法阻塞javascript运行，也就是说无法通过相同的机制来实现confirm效果。

     正面冲锋不成，就只能小路包抄了。

     弹出框中按钮单击事件代码是自定义的，我们只需将用户选择Yes或No的处理过程直接定义在按钮事件中也就模拟出了“确认”的效果。

 1  function openConfirm() {
 2     var newP = new iSunPopup({ width: 380, height: 150, title: 'iSun confirm', content: 'iSun confirm content',         buttons: [
 3                 {
 4                     text: 'No',
 5                     clickHandler: function () {
 6                         alert('你点击了No，此处可编写No逻辑。');
 7                         this.close();
 8                     }
 9                 },
10                 {
11                     text: 'Yes',
12                     clickHandler: function () {
13                         alert('你点击了Yes，此处可编写Yes逻辑。');
14                         this.close();
15                     }
16                 }]
17     });
18 
19     newP.open();
20 }

     附示例代码：iSunPopup.rar

 

      相关文章：

     mootools系列：打造属于你自己的Popup（弹出框）——基本结构篇

     mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇

转载于:https://www.cnblogs.com/isun/archive/2011/05/17/2049099.html