Code for implementing the custom dialog box using JQuery

In order to get richer user-defined dialog box functions, a dialog box plug-in is compiled using JQuery. You only need to reference JavaScript to obtain rich user-defined dialog box functions.

Features:

Allows visual control through CSS.

You can display the page element as a dialog box.

When the dialog box is activated, no elements outside the dialog box can be operated by the mouse.

The dialog box can be moved freely within the workspace and automatically centered Based on the workspace size.

You do not need to write complex JavaScript. simply describe the HTML attributes.

The tested plug-in can work normally in Firefox and IE.

Simple usage description:

Reference JQuery and dialog box plug-in files:

<Script src = jquery-latest.js> </script>
<Script src = messageBox. js> </script>
Define related buttons as rows:
<Input id = "Button4" type = "button" value = "showoption =" control: test2; width: 220; height: 120; title: Dialog Box "/>
Define the content displayed in the relevant dialog box:
<Div id = "test2" style = "display: none">
<Table style = "width: 200px">
<Tr>
<Td>
Is the JQuery mode dialog box plug-in easy to use? </Td>
</Tr>
<Tr>
<Td align = "right">
<Input id = "Button2" onclick = "CloseMessageBox ()" type = "button" value = "yes"/>
<Input id = "Button6" onclick = "CloseMessageBox ()" type = "button" value = "no"/> </td>
</Tr>
</Table>
</Div>
Copy codeThe Code is as follows:
/* JQuery mode dialog box plug-in

* Writer: FanJianHan (henryfan@msn.com)

* License: GPL (GPL-LICENSE.txt) licenses.

*/

// Whether the dialog box has been initialized

Var MessageOninit = false;

// Record the x and y offsets of the body scroll bar. The Element Object of the content is displayed, and the parent object of the content Element Object is displayed.

Var MessageBox_scrolltop, MessageBox_scrollleft, Messagebox_AC, MessageBox_PC;

// Dialog box object, dialog box width, and dialog box height

Var MessageBox_win, MessageBox_width, MessageBox_height;

// Whether the dialog box is in the moving status

Var MessageBox_Moving = false;


// Display mode prompt box

Function ShowMessageBox (option)

{

Var container, iframe, enabled, enabledframe;

Var height = 400;

Var width = 400;

MessageBox_scrolltop = 0;

MessageBox_scrollleft = 0;

If (! MessageOninit)

{

CreateContainer (option );

MessageOninit = true;

$ ('# Messagebox_close'). click (function (){

CloseMessageBox ();

});

$ (Window). resize (function (){

SetStyle (option );

SetEnabledStyle ();


});

$ (Window). scroll (function (e ){

MessageBox_scrolltop export document.doc umentElement. scrollTop;

MessageBox_scrollleft = document.doc umentElement. scrollLeft;

SetEnabledStyle ();

});

MessageBox_win = $ ("# messagebox_win ");

$ ('# Messagebox_title'). mousedown (handleMouseDown );

$ ('# Messagebox_title'). mouseup (handleMouseUp );

$ ('# Messagebox_title'). mousemove (handleMouseMove );

Document. onmouseup = handleMouseUp;



}



If (option. height)

Height = parseInt (option. height );

If (option. width)

Width = parseInt (option. width );

MessageBox_height = height;

MessageBox_width = width;

Messagebox_AC =$ ('#' + option. control );

MessageBox_PC = Messagebox_AC.parent ();

Messagebox_AC.css ('display ',");

Enabled = '<div id = "messagebox_enabled" style = "background-color: lightgrey; width: 100%; height: 100%; position: absolute; z-index: 99998; "> </div>'

Enabledframe = '<iframe id = "messagebox_enabledframe" frameborder = 0 scrolling = no style = "position: absolute; visibility: inherit; top: 0px; left_0px; width: 100%; height: 100%; z-index: 99997; "> </iframe> ';

$ ('# Messagebox_enabledframe'). remove ()_

$ ('# Messagebox_enabled'). remove ();

Certificate ('{messagebox_title'}.html (option. title );


$ ('# Messagebox_from'). append (Messagebox_AC );

SetStyle (option );

$ (Document. body). append (enabledframe );

$ (Document. body). append (enabled );

SetEnabledStyle ();

$ ('# Messagebox_win'). fadeIn ("slow ");



// Create a dialog box container

Function CreateContainer (option)

{

Var html;

Html = '<div id = "messagebox_win" style = "position: absolute; z-index: 99999; "> <table cellpadding =" 0 "cellspacing =" 0 "id =" messagebox_table "> <tr> <td id =" messagebox_title_td "> <table id =" messagebox_title_table "> <tr> <td style = "width: 99%; "> <div id =" messagebox_title "style =" width: 100%; cursor: default; "> </div> </td> <button id =" messagebox_close "> </button> </td> </tr> </table> </td> </tr> <tr id = "messagebox_body_td"> <td valign = "top"> <div id = "messagebox_from" style = "text-align: center; "> </div> </td> </tr> </table> </div> ';

If (option. parent)

{

$ ('#' + Option. parent). append (html );

}

Else

{

$ (Document. body). append (html );

}

}


// Set the background style for display

Function SetEnabledStyle ()

{

Var de, w, h, css, region;

Region = GetDocumentRegion ();

Css = {width: region. width + "px", height: region. height + "px ",

Left: MessageBox_scrollleft + 'px ', top: MessageBox_scrolltop + 'px '}

GetOpacity (css );

((#Messagebox_enabled”).css (css );

Optional ({{messagebox_enabledframe}}.css (css );

}


// Set the transparent style

Function GetOpacity (css)

{

If (window. navigator. userAgent. indexOf ('msie ')> = 1)

{

Css. filter = 'progid: DXImageTransform. Microsoft. Alpha (opacity = 30 )';

}

Else

{

Css. opacity = '0. 3 ′;

}

}


// Set the dialog box sample

Function SetStyle (option)

{

Var region, css;

Region = GetDocumentRegion ();

Css = {width: MessageBox_width + 'px ', height: MessageBox_height + 'px ',

Left: (region. width-MessageBox_width)/2) + 'px ', top: (region. height-MessageBox_height)/2) + 'px '}

If (region. height <MessageBox_height) // if the height of the body is smaller than the height of the dialog box

{

Css. top = 10 + 'px ';

}

Else

{

Css. top = (region. height-MessageBox_height)/2) + 'px'

}

Certificate ('{messagebox_win'}.css (css );

Css. top = '0px ';

Css. left = '0px ';

Certificate ('{messagebox_table'}.css (css );

Css. width = '20180101 ';

Css. height = '16px ';

(('{Messagebox_title_td'}.css (css );

Css. height = height-46 + 'px ';

(('{Messagebox_body_td'}.css (css );



}


Var down_x, down_y, cx, cy;

Function handleMouseDown (e)

{

Var evt = e | event;


Down_x = evt. clientX;

Down_y = evt. clientY;

Cx secrets (parseint(messagebox_win.css ('left') | 0 );

Cy = (parseInt(MessageBox_win.css ('top') | 0)

MessageBox_Moving = true; success

Document.doc umentElement. onselectstart = function () {return false };

Document.doc umentElement. ondrag = function () {return false };

Document. onmousemove = handleMouseMove;

$ (Document. body ). append ('<div id = "messagebox_move" style = "position: absolute; z-index: 100000; border-right: midnightblue 1px dashed; border-top: midnightblue 1px dashed; border-left: midnightblue 1px dashed; border-bottom: midnightblue 1px dashed; "> </div> ');

('{Messagebox_move'}.css('width', messagebox_win.css ('width '));

Certificate ('{messagebox_move'}.css ('height', MessageBox_win_u99? Ss ('height '));

('{Messagebox_move'}.css('left', messagebox_win.css ('left '));

Certificate ('{messagebox_move'}.css('top', messagebox_win.css ('top '));



}


Function GetDocumentRegion ()

{

Var w, h, de;

De = document.doc umentElement;

W = self. innerWidth | (de & de. clientWidth) | document. body. clientWidth;

H = self. innerHeight | (de & de. clientHeight) | document. body. clientHeight;

Return {height: h, width: w };

}


Function handleMouseMove (e)

{

Var left, top, region;

If (MessageBox_Moving)

{

Var evt = e | event;


Left = evt. clientX + cx-down_x;

Top = evt. clientY + cy-down_y;

Region = GetDocumentRegion ();

If (left + MessageBox_width> region. width)

{

Left = region. width-10-MessageBox_width;

}

If (top + MessageBox_height> region. height) then

{

Top = region. height-10-MessageBox_height;

}

If (left <10)

Left = 10;

If (top <10)

Top = 10;

Var css = {left: left + 'px', top: top + 'px '}

Certificate ('{messagebox_move'}.css (css );

}

}


Function handleMouseUp ()

{

If (MessageBox_Moving)

{

Messagebox_win.css('width', ('{messagebox_move'}.css ("width "));

Messagebox_win.css('height', ('{messagebox_move'}.css ("height "));

Messagebox_win.css('left', ('{messagebox_move'}.css ("left "));

Messagebox_win.css('top', ('{messagebox_move'}.css ("top "));

}

MessageBox_Moving _ u61? False;

Document. onmousemove = null;

$ ('# Messagebox_move'). remove ();

}



}


// Close mode dialog box

Function CloseMessageBox ()

{

If (MessageOninit)

{

$ ('# Messagebox_win'). hide ();

$ ('# Messagebox_enabled'). remove ();

$ ('# Messagebox_enabledframe'). remove ();

Messagebox_AC.css ('display', 'None ');

MessageBox_PC.append (Messagebox_AC );


}

Document.doc umentElement. onselectstart = null;

Document.doc umentElement. ondrag = null;

}

$ (Document). ready (function (){

$ (Document). find ('[@ showoption]'). each (function (){

Var namevalue;

// The element id, width, height, title, and Element Object id displayed in the dialog box

Var option = {control: ", width: '000000', height: '000000', title:", parent: null };

Var properties = $ (this). attr ('showoption'). split (';');

For (I = 0; I <properties. length; I ++)

{

Namevalue = properties [I]. split (':');

If (namevalue. length> 1)

{

Execute = "option." + namevalue [0] + '= \ "+ namevalue [1] + '\';';

Eval (execute );

}

}


$ (This). click (function (){

ShowMessageBox (option );

Document. body. focus ();

});

});

});

Messageboxscript.rar