JQuery实现自定义对话框的代码

bobw5201314

bobw5201314

2016-02-19 16:07

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。
为了得到更丰富的自定义对话框功能,于是用JQuery编写了一个对话框插件;只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。

插件功能特点:

允许通过CSS进行外观控制。

可以任意把面页的元素作为对话框显示。

当对话框激活时,对话框外的任何元素不能接受鼠标操作。

对话框可以在工作区范围内任意移动,根据工作区大小自适应居中功能。

并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。

经过测试插件可以在Firefox和IE下正常工作。

简单使用描述:

引用JQuery和对话框插件文件:

script src=jquery-latest.js/script
script src=messageBox.js/script
定义相关按钮为行:
input id=”Button4″ type=”button” value=”提问对话框“ showoption=”control:test2;width:220;height:120;title:对话框” /
定义相关对话框显示的内容:
div id=”test2″ style=”display:none”
table style=”width: 200px”
tr
td
JQuery模式对话框插件好用吗?/td
/tr
tr
td align=”right”
input id=”Button2″ onclick=”CloseMessageBox()” type=”button” value=”是” /
input id=”Button6″ onclick=”CloseMessageBox()” type=”button” value=”否” //td
/tr
/table
/div
代码如下:
/* 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='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();

$('#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='div id=”messagebox_win” style=”position:absolute;z-index:99999;”table cellpadding=”0″ cellspacing=”0″ id=”messagebox_table”trtd id=”messagebox_title_td”table id=”messagebox_title_table” trtd style=”width:99%;” div id=”messagebox_title” style=”width:100%;cursor: default;”/div/tdtdbutton id=”messagebox_close”/button/td/tr/table/td/trtr 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);

}

}


//设置显示时背景式样

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

}



}


//关闭模式对话框

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;iproperties.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();

});

});

});

展开更多 50%)
分享

猜你喜欢

JQuery实现自定义对话框的代码

Web开发
JQuery实现自定义对话框的代码

用JQuery 实现的自定义对话框

Web开发
用JQuery 实现的自定义对话框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

自定义confirm对话框

Web开发
自定义confirm对话框

JavaScript自定义模式对话框

Web开发
JavaScript自定义模式对话框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用Delphi 实现自定义颜色对话框及其构件

编程语言 网络编程
用Delphi 实现自定义颜色对话框及其构件

通过修改VCL源码实现自定义输入对话框

编程语言 网络编程
通过修改VCL源码实现自定义输入对话框

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

MYSQL教程:数据库具体操作

MYSQL教程:数据库具体操作

利用MySQL内置函数实现全文搜索功能

利用MySQL内置函数实现全文搜索功能
下拉加载更多内容 ↓