jquery implements the code for the custom dialog box _jquery

To get richer custom dialog box features, a dialog box plugin was written in jquery, and a rich custom dialog box was available simply by referencing the relevant JavaScript.

Plug-in features:

Allows for visual control through CSS.

You can display the elements of a face page as a dialog box arbitrarily.

When a dialog box is active, any element outside the dialog box cannot accept mouse action.

dialog boxes can be moved anywhere within the scope of the workspace to accommodate the centering function based on the size of the workspace.

There is no need to write complex JavaScript, which can be described by simple HTML attributes.

After testing plug-ins can be in Firefox and IE work properly.

Simple Use Description:

Referencing 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=" Question Dialog "showoption=" Control:test2;width:220;height:120;title: Dialog box "/>
Define what the related dialog box displays:
<div id= "test2″style=" Display:none ">
<table style= "width:200px" >
<tr>
&LT;TD >
jquery Mode dialog box plug-in good?</td>
</tr>
<tr>
&LT;TD align= "Right" >
<input id= "button2″onclick=" Closemessagebox () "type=" button "value=" is "/>"
<input id= "button6″onclick=" Closemessagebox () type= "button" value= "No"/></td>
</tr>
</table>
</div>

Copy Code code as follows:

/* JQuery Mode dialog box Plugin

* Writer:fanjianhan (henryfan@msn.com)

* LICENSE:GPL (gpl-license.txt) licenses.

*/

Whether the dialog box has been initialized

var messageoninit = false;

Record the x,y offset of the body scroll bar, display the element object for the content, display the parent object of the content element object

var messagebox_scrolltop,messagebox_scrollleft,messagebox_ac,messagebox_pc;

dialog box object, dialog box width, dialog height

var messagebox_win,messagebox_width,messagebox_height;

Whether the dialog box is in a mobile state

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 =document.documentelement.scrolltop;

Messagebox_scrollleft = Document.documentElement.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%;p osition: absolute;z-index:99998; " ></div> '

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

$ (' #messagebox_enabledframe '). Remove () _

$ (' #messagebox_enabled '). Remove ();

$ (' #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" &GT;&LT;TR&GT;&LT;TD "id=" ><table id= "messagebox_title_table" ><tr><td style= "width:99%" ><div "id=" Style= "Width:100%;cursor:default;" ></div></td><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);

}

}


Setting the background style when displaying

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);

$ ("#messagebox_enabledframe"). CSS (CSS);

}


Set 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 up a 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 body display height is less than the height of the dialog box

{

css.top=10+ ' px ';

}

Else

{

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

}

$ (' #messagebox_win '). CSS (CSS);

css.top= ' 0px ';

css.left= ' 0px ';

$ (' #messagebox_table '). CSS (CSS);

Css.width= ' 100% ';

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 = (parseint (messagebox_win.css (' left ')) |

cy = (parseint messagebox_win.css (' top ') |)

messagebox_moving= true;³

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

Document.documentElement.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 '));

$ (' #messagebox_move '). CSS (' height ', messagebox_win_u99 SS (' height '));

$ (' #messagebox_move '). CSS (' left ', messagebox_win.css (' left '));

$ (' #messagebox_move '). CSS (' top ', messagebox_win.css (' top '));



}


function Getdocumentregion ()

{

var W,h,de;

de = document.documentelement;

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) ³

{

top = region.height-10-messagebox_height;

}

if (left <10)

left = 10;

if (top <10)

top = 10;

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

$ (' #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 modal 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.documentElement.onselectstart = null;

Document.documentElement.ondrag = null;

}

$ (document). Ready (function () {

$ (document). Find (' [@showoption] "). each (function () {

var namevalue;

Although the displayed element ID, display width, display height, title, dialog box Alien element object ID

var Option={control: ", Width: ' 400′,height: ' 400′,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