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

Add the "close (×)" button to the pop-up box (popup)

Such as the pop-up box structureCodeAs shown in, the close button indicates that "X" is placed in a div. To disable the entire pop-up box, you only need to append a click event with the close function when creating the div.

1 New Element ( ' Div ' ,{
2 ' ID ' : ' Closebtn ' ,
3 HTML: ' × ' ,
4 Events :{
5 Click: Function (){
6 This . Close ();
7 }. BIND ( This )
8 }
9 }). Inject ( This . Popuptitle );

Here we need to emphasize the BIND () function in mootools. This function acts on the target function so that its this pointer points to the passed parameter object. The sample code is as follows:

1 < Html Xmlns = "Http://www.w3.org/1999/xhtml" >
2 < Head >
3 < Title > Bind Test </ Title >
4 < Script Type = "Text/JavaScript" SRC = "JS/mootools. js" > </ Script >
5 < Script Language = "JavaScript" Type = "Text/JavaScript" >
6 Function Originalfunction (){
7 Alert ( This );
8 }
9 Function Pointdiv (){
10 VaR Boundfunction = Originalfunction. BIND ($ ( ' Sample ' ));
11 Boundfunction ();
12 }
13 </ Script >
14 </ Head >
15 < Body >
16 < Div ID = "Sample" > This is a div </ Div >
17 < Input Type = "Button" ID = "Btna" Value = "Bind Test 1" Onclick = "Javascript: originalfunction ()"   />
18 < Input Type = "Button" ID = "Btnb" Value = "Bind Test 2" Onclick = "Javascript: pointdiv ()"   />
19 </ Body >
20 </ Html >

Click "bind Test 1" and "bind Test 2" respectively. The results of the two alert statements are shown in:

Go back to the Code for creating "Close Div,

1 Click: Function (){
2 This . Close ();
3 }. BIND ( This )

The BIND (this) here binds the current "pop-up box instance" to the this pointer in the click function each time.

Enable the pop-up box (popup) to add custom buttons.

The structure of the pop-up box shows that the subject mainly includes the title, content, and footer parts. In the footer section, we can place some functional buttons on it. The display names and functions of these buttons are customized by the user.

The button description is passed to constructor initialize as part of the parameter. The basic format is as follows:

1 Buttons :[{
2 Text: ' Button name ' ,
3 Clickhandler: Function (){
4 // Button Function Definition
5 }
6 }]

In the code, create the corresponding button according to the user's definition.

1 _ Injectbutton: Function (Btnvalue, btnclickevent ){
2 New Element ( ' Input ' ,{
3 Type: ' Button ' ,
4 Value: btnvalue,
5 Events :{
6 Click: (btnclickevent |   This . Close). BIND ( This )
7 }
8 }). Inject ( This . Footer );
9
10 Return   This ;
11 }

Let your pop-up box (popup) be dragged

Needless to say, draggable seems to be an essential feature to improve the user experience in your pop-up box. The extension library of mootools provides a class specifically used to process object dragging: drag. Its constructor syntax is:

1 New Drag (El [, options]);

El: drag an object

Options: an optional parameter that controls the drag details.

The optional parameter used in the Code is handler. The function is to set the handler of the drag, that is, to manipulate the object by dragging the mouse. The default value is to drag the object itself.

In the code, we use the title part as the control position for dragging.

1 New Drag ( This . Popuptable, {handle: This . Popuptitle });

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)-appearance and Application