Mootools series: Create your own popup (pop-up box)-appearance and Application

Popup border

The translucent border is dazzling. In fact, it is easy to implement. You only need to set a CSS attribute: opacity. Opacity indicates "opacity". The value ranges from 0 to 1. 0 indicates full transparency, and 1 indicates full opacity.

InCode, I set the border opacity to 0.5.

1 Document. ID (Newcell). setstyle ( ' Opacity ' , 0.5 );

The Fade-in and fade-out effect of the pop-up box (popup)

After learning about the opacity CSS attribute, the attribute value in the pop-up box has a gradient process between 0 and 1, that is, Fade in. Otherwise, fade out.

The Application of mootools can control the Tween class for the transition of any CSS attribute between two values.

1 This . Popuptable [ ' Tween ' ] ( ' Opacity ' , ' 1 ' );

When the pop-up box is closed, we need to destroy it. In combination with the fade-out effect, this destroy action should occur when the fade-out effect is completed. The Code is as follows:

1 TWEEN :{
2 Oncomplete: Function (){
3 If ( This . Popuptable. getstyle ( ' Opacity ' ) =   0 )
4 This . _ Cleanup ();
5 }. BIND ( This )
6 }

Convert to alert

In JavaScript, the functions of the alert function are simple prompts and prompts. It is easy to implement based on the existing features in the Custom pop-up box.

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 }

Change to confirm

The confirm function in Javascript is more complex than alert. In the application, you can select YES or NO of confirm () and then process the Code accordingly. This selection process is blocked, and JavaScript Runtime is stuck in this place to wait for the user's processing.

However, the custom pop-up box cannot block JavaScript running, that is, the confirm effect cannot be achieved through the same mechanism.

If the front charge fails, you can only copy the path.

In the pop-up box, the event code is customized by clicking the button. We only need to define the process of user-selected yes or no in the button event to simulate the "Confirmation" effect.

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 ( ' You click "no". You can write the "no" logic here. ' );
7 This . Close ();
8 }
9 },
10 {
11 Text: ' Yes ' ,
12 Clickhandler: Function (){
13 Alert ( ' After you click yes, you can write the Yes logic here. ' );
14 This . Close ();
15 }
16 }]
17 });
18
19 Newp. open ();
20 }

Example code: isunpopup.rar

 

RelatedArticle:

Mootools series: Create your own popup (pop-up box)-Basic Structure

Mootools series: Create your own popup (pop-up box)-extended functions