Practical jquery (2)-self-built drag-and-drop mode dialog box

Implementation of the Modal Dialog Box
 
1. A container div restricts the scope of the Modal Dialog Box. components covered by this div cannot be clicked.
 
2. A translucent sub-div in the container div to implement the mask effect. width: 100% height: 100%;
 
3. A dialog box div in the container div is used to layout components in the dialog box. The dialog box consists of titler, body, and footer.
 
Implementation of the drag Function
 
Listen to the mouse-down event on the specified component, and add the mousemove event and moueseup event to the component to be dragged)
 
As follows:
 
 
 
Test code:
 
 
Var msg = '<p class = "tipgreen"> make sure that the payment amount is correct. You have paid by swiping your card! </P> '+
'<P class = "tipred"> total payment: 3.0 RMB </p>' +
'<Br> <ol id = "oprationlog" class = "log"> <li> the card is read successfully. If it is not your own card, the consumption password is verified. Consumption password verification successful! </Li> <li> aaa </li> </ol> <p id = "tip4" class = "tipgreen"> returns to the homepage in 20 seconds! </P> ';

Var testDialog = $. DS. UI. Dialog. show (msg, {title: "Payment confirmation-test Dialog box "});
Below are the code and css
 
I. Dialog Box code
 
 
(Function ($ ){
If (! $. DS) $. DS = {};
If (! $. DS. UI) $. DS. UI = {};

/**
* Dialog box constructor.
* @ Param {Object} msg
* @ Param {Object} setting
* @ Param {Object} owner: jQuery Object.
*/
$. DS. UI. Dialog = function (msg, setting, owner ){
This. owner = owner;
If (owner = undefined | null = owner) this. owner = author (registry.doc ument. body );

This. setting = $. extend ($. DS. UI. Dialog. defaultSetting, setting );
// Create a container div
This. container = $ ('<div class = "dialog_container"/> ');
This. mask = $ ('<div class = "dialog_mask"/> ');
This. body = $ ('<div class = "dialog_body"/> ');

This. container. append (this. mask );
This. container. append (this. body );

This. titlearea = $ ('<div class = "dialog_body_titlearea"> <p>' + this. setting. title + "</p> </div> ");
<Strong> <span style = "color: # ff6666;"> $. DM. setDrag (this. body, this. titlearea); // implement the drag Function
</Span> </strong> this. main = $ ('<div class = "dialog_body_mainarea">' + msg + '</div> ');
This. footer = $ ('<div class = "dialog_body_footarea"> <button id = "_ btn_close"> close </button> </div> ');
This. body. append (this. titlearea );
This. body. append (this. main );
This. body. append (this. footer );

This. footer. find ("# _ btn_close"). click (function (){
This. dialog. close ();
}) [0]. dialog = this;
};

$. DS. UI. Dialog. defaultSetting = {
Model: true,
Width: 600,
Height: 450,
Title: "dialog box ",
Icon: "./img/sys/dicon.png"
};

/**
* Display dialog box-static method. A dialog box is displayed.
* @ Param {String} msg: the prompt message;
* @ Param {Object} seeting: Dialog Box setting;
* @ Param {Object} owner
* The dialog box masks objects. If owner = null, ownere = body
*/
$. DS. UI. Dialog. show = function (msg, setting, owner ){
Var dlg = new $. DS. UI. Dialog (msg, setting, owner)
Dlg. show ();
Return dlg;
};

$. DS. UI. Dialog. prototype = {
Show: function (){
This. owner. append (this. container );
This. body. width (this. setting. width );
// In ff, width: 100% has two more pixels, so it can only be set by code.
This. titlearea. width (this. setting. width-2 );
This. body. height (this. setting. height );
This. body. offset ({left :( this. container. width ()-this. setting. width)/2, top: 100 });
This. main. height (this. setting. height-this. titlearea. height ()-this. footer. height ());
},

Close: function (){
If (this. setting. closeHandler ){
This. setting. closeHandler ();
}
This. owner [0]. removeChild (this. container [0]);
}
}
}) (JQuery );
Ii. Dialog Box css
 
[Css] view plaincopy
. Dialog_container {
Position: absolute;
Top: 0;
Left: 0;
Width: 100%;
Height: 100%;
Z-index: 100;
}
 
. Dialog_mask {
Position: absolute;
Width: 100%;
Height: 100%;
Top: 0;
Left: 0;
Background: #999;
Opacity: 0.7;
Filter: alpha (opacity = 70 );
Z-index: 0;
}
 
. Dialog_body {
Overflow: hidden;
Position: absolute;
Border-left: # ccc 2px solid;
Border-top: # ffffff 2px solid;
Border-bottom: #666 2px solid;
Border-right: #666 2px solid;
Background: #999;
Border-radius: 5px 5px;
Box-shadow: 2px 2px 3px #000;
Z-index: 10;
}
 
. Dialog_body_titlearea {
Padding: 3px 0 0 0;
Width: 100%;
Cursor: move;
Vertical-align: middle;
Border-left: #666 1px solid;
Border-top: #666 1px solid;
Border-bottom: # fff 1px solid;
Border-right: # eee 1px solid;
Background: #669;
Font-weight: bolder;
Height: 20px;
}
 
. Dialog_body_title_icon {
Border: 0;
Width: 18px;
Height: 18px;
Margin-left: 2px;
Margin-right: 2px;
Float: left;
}
 
. Dialog_body_mainarea {
Padding: 5px;
Width: 100%;
Height: 200px;
Border-bottom: #666 1px solid;
}
 
. Dialog_body_footarea {
Padding: 5px;
Width: 100%;
Border-top: # fff 1px solid;
Height: 70px;
}
 
 
Css for testing
 
[Css] view plaincopy
Ol. log {
Border: 1px solid #617775;
Background: # f0f6e4;
Width: 95%;
Height: 238px;
Overflow: hidden;
Font-size: 20;
}
 
Ol. log. small {
Height: 45px;
}
 
Ol. log li {
Color: #666666;
Padding-left: 10px;
}
 
Ol. log li. dark {
Background-color: # E3E3E3;
}
 
3. Drag and Drop Management Code
 
 
(Function ($ ){
/**
* DM = drag manager
*/
$. DM = {
/**
* Set a drag-and-drop component.
* @ Param {Object} component: components that can be dragged
* @ Param {Object} rect: Enter the drag and drop area. If this parameter is not specified, it is the component customer area.
*/
SetDrag: function (component, handler ){
Var dragable = component;
If (null! = Handler) dragable = handler;

Dragable. bind ("mousedown. dragbegin", function (event ){
// Alert ("Drag begin! ");
Component [0]. _ cx = event. clientX;
Component [0]. _ cy = event. clientY;

Component. bind ("mousemove. dragging", function (event ){
Var _ ox = event. clientX-this. _ cx;
Var _ oy = event. clientY-this. _ cy;

This. _ cx = event. clientX;
This. _ cy = event. clientY;

$ (This ). offset ({top: $ (this ). offset (). top + _ oy, left: $ (this ). offset (). left + _ ox });
});

Component. bind ("mouseup. dragstop", function (){
Component. unbind ("mousemove. dragging ")
})
});
}
}
}) (JQuery );
 
The main part has been implemented, and there are still many areas to be improved. please correct me.

From the column of DS