半透明化弹出框（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 }
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({ 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 }
2 var newP = new iSunPopup({ 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({ 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 }
2 var newP = new iSunPopup({ 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
相关文章：