JQuery code to implement custom dialog box_jquery

In order to get richer custom dialog box functions, I wrote a dialog box plug-in using JQuery; you can get rich custom dialog box functions by simply quoting the relevant JavaScript.

Plug-in features:

Allows appearance control through CSS.

You can display any element of the page as a dialog box.

When the dialog box is activated, any elements outside the dialog box cannot accept mouse operations.

The dialog box can be moved arbitrarily within the work area, and the centering function is adaptive according to the size of the work area.

There is no need to write complex JavaScript, just describe it through simple HTML attributes.

After testing, the plug-in can work normally under Firefox and IE.

Simple usage description:

Quote JQuery and dialog plug-in files:


< ;script src=messageBox.js>
Define related buttons as rows:

Define the content displayed in the relevant dialog box:

< ;/tr>

Is the JQuery modal dialog plug-in easy to use?

Copy code The code is as follows:

/* JQuery 模式对话框插件

* writer: FanJianHan (henryfan@msn.com)

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

*/

//是否已初始化过对话框

var MessageOninit = false;

//记录body滚动条的x,y偏移量;显示内容的元素对象，显示内容元素对象的父对象

var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;

//对话框对象，对话框宽度，对话框高度

var MessageBox_win,MessageBox_width,MessageBox_height;

//对话框是否处于移动状态

var MessageBox_Moving = false;


//显示模式提示框

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='

'

enabledframe='';

$('#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”);



//创建对话框容器

function CreateContainer(option)

{

var html;

html='

';

if(option.parent)

{

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

}

else

{

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

}

}


//设置显示时背景式样

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

}


//设置透明式样

function GetOpacity(css)

{

if(window.navigator.userAgent.indexOf('MSIE')>=1)

{

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

}

else

{

css.opacity= ‘0.3′;

} 

}


//设置对话框试样

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 )//如果body显示的高度小于对话框高度

{

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

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

MessageBox_Moving= true;³

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

document.documentElement.ondrag = function(){return false};

document.onmousemove = handleMouseMove;

$(document.body).append('

');

$('#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();

}



}


//关闭模式对话框

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;

//虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id

var option={control:”,width:'400′,height:'400′,title:”,parent:null};

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

for(i=0;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