JQuery實(shí)現(xiàn)自定義對(duì)話框的代碼
更新時(shí)間：2008年06月15日 19:28:51 作者：
JavaScript為我們提供幾種對(duì)話框功能，但功能都十分有限；雖然在IE下可以通過模式窗體的方式創(chuàng)建更豐富的對(duì)話框功能，但畢竟只有IE得到支持。
為了得到更豐富的自定義對(duì)話框功能，于是用JQuery編寫了一個(gè)對(duì)話框插件；只需簡(jiǎn)單地引用相關(guān)JavaScript就能得到豐富的自定義對(duì)話框功能。
插件功能特點(diǎn):
允許通過CSS進(jìn)行外觀控制。
可以任意把面頁(yè)的元素作為對(duì)話框顯示。
當(dāng)對(duì)話框激活時(shí)，對(duì)話框外的任何元素不能接受鼠標(biāo)操作。
對(duì)話框可以在工作區(qū)范圍內(nèi)任意移動(dòng)，根據(jù)工作區(qū)大小自適應(yīng)居中功能。
并不需要編寫復(fù)雜的JavaScript,通過簡(jiǎn)單HTML屬性描述即可。
經(jīng)過測(cè)試插件可以在Firefox和IE下正常工作。
簡(jiǎn)單使用描述：
引用JQuery和對(duì)話框插件文件：
<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
定義相關(guān)按鈕為行：
<input id=”Button4″ type=”button” value=”提問對(duì)話框“ showoption=”control:test2;width:220;height:120;title:對(duì)話框” />
定義相關(guān)對(duì)話框顯示的內(nèi)容:
<div id=”test2″ style=”display:none”>
<table style=”width: 200px”>
<tr>
<td >
JQuery模式對(duì)話框插件好用嗎?</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 模式對(duì)話框插件
* writer: FanJianHan (henryfan@msn.com)
* License: GPL (GPL-LICENSE.txt) licenses.
*/
//是否已初始化過對(duì)話框
var MessageOninit = false;
//記錄body滾動(dòng)條的x,y偏移量;顯示內(nèi)容的元素對(duì)象，顯示內(nèi)容元素對(duì)象的父對(duì)象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//對(duì)話框?qū)ο螅瑢?duì)話框?qū)挾?，?duì)話框高度
var MessageBox_win,MessageBox_width,MessageBox_height;
//對(duì)話框是否處于移動(dòng)狀態(tài)
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”);
//創(chuàng)建對(duì)話框容器
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><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);
}
}
//設(shè)置顯示時(shí)背景式樣
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);
}
//設(shè)置透明式樣
function GetOpacity(css)
{
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{
css.filter= ‘progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
}
else
{
css.opacity= ‘0.3′;
}
}
//設(shè)置對(duì)話框試樣
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顯示的高度小于對(duì)話框高度
{
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();
}
}
//關(guān)閉模式對(duì)話框
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,顯示寬度,顯示高度,標(biāo)題,對(duì)話框寄居的元素對(duì)象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
插件功能特點(diǎn):
允許通過CSS進(jìn)行外觀控制。
可以任意把面頁(yè)的元素作為對(duì)話框顯示。
當(dāng)對(duì)話框激活時(shí)，對(duì)話框外的任何元素不能接受鼠標(biāo)操作。
對(duì)話框可以在工作區(qū)范圍內(nèi)任意移動(dòng)，根據(jù)工作區(qū)大小自適應(yīng)居中功能。
并不需要編寫復(fù)雜的JavaScript,通過簡(jiǎn)單HTML屬性描述即可。
經(jīng)過測(cè)試插件可以在Firefox和IE下正常工作。
簡(jiǎn)單使用描述：
引用JQuery和對(duì)話框插件文件：
<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
定義相關(guān)按鈕為行：
<input id=”Button4″ type=”button” value=”提問對(duì)話框“ showoption=”control:test2;width:220;height:120;title:對(duì)話框” />
定義相關(guān)對(duì)話框顯示的內(nèi)容:
<div id=”test2″ style=”display:none”>
<table style=”width: 200px”>
<tr>
<td >
JQuery模式對(duì)話框插件好用嗎?</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>
復(fù)制代碼 代碼如下:
/* JQuery 模式對(duì)話框插件
* writer: FanJianHan (henryfan@msn.com)
* License: GPL (GPL-LICENSE.txt) licenses.
*/
//是否已初始化過對(duì)話框
var MessageOninit = false;
//記錄body滾動(dòng)條的x,y偏移量;顯示內(nèi)容的元素對(duì)象，顯示內(nèi)容元素對(duì)象的父對(duì)象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//對(duì)話框?qū)ο螅瑢?duì)話框?qū)挾?，?duì)話框高度
var MessageBox_win,MessageBox_width,MessageBox_height;
//對(duì)話框是否處于移動(dòng)狀態(tài)
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”);
//創(chuàng)建對(duì)話框容器
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><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);
}
}
//設(shè)置顯示時(shí)背景式樣
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);
}
//設(shè)置透明式樣
function GetOpacity(css)
{
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{
css.filter= ‘progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
}
else
{
css.opacity= ‘0.3′;
}
}
//設(shè)置對(duì)話框試樣
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顯示的高度小于對(duì)話框高度
{
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();
}
}
//關(guān)閉模式對(duì)話框
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,顯示寬度,顯示高度,標(biāo)題,對(duì)話框寄居的元素對(duì)象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
您可能感興趣的文章:
- jQuery Mobile的loading對(duì)話框顯示/隱藏方法分享
- jquery刪除提示框彈出是否刪除對(duì)話框
- jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
- JQuery彈出炫麗對(duì)話框的同時(shí)讓背景變灰色
- Jquery實(shí)現(xiàn)頁(yè)面加載時(shí)彈出對(duì)話框代碼
- 用JQuery 實(shí)現(xiàn)的自定義對(duì)話框
- jquery 模式對(duì)話框終極版實(shí)現(xiàn)代碼
- 6款經(jīng)典實(shí)用的jQuery小插件及源碼(對(duì)話框/提示工具等等)
- 自己使用js/jquery寫的一個(gè)定制對(duì)話框控件
- jQuery Dialog對(duì)話框事件用法實(shí)例分析
- jQuery實(shí)現(xiàn)時(shí)尚漂亮的彈出式對(duì)話框?qū)嵗?/a>
- jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法分析
相關(guān)文章
jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了JQuery鼠標(biāo)移到小圖顯示大圖效果的方法,涉及jQuery鼠標(biāo)事件與圖形操作技巧,需要的朋友可以參考下2015-06-06
瀏覽器窗口大小變化時(shí)使用resize事件對(duì)框架不起作用的解決方法
有時(shí)候我們需要用resize事件調(diào)整瀏覽器窗口大小，但對(duì)框架卻不起作用，這里介紹下實(shí)現(xiàn)方法，需要的朋友可以參考下2014-05-05
基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
項(xiàng)目中經(jīng)常會(huì)對(duì)表格進(jìn)行分頁(yè)，以下運(yùn)用jquery對(duì)用戶管理中的用戶表格進(jìn)行分頁(yè)。2011-06-06
回車執(zhí)行跳到下一個(gè)文本框，在本文通過jquery簡(jiǎn)單實(shí)現(xiàn)下，需要的朋友可以參考下2013-08-08
jQuery控制DIV層實(shí)現(xiàn)由大到小，由遠(yuǎn)及近動(dòng)畫變化效果
這篇文章主要介紹了jQuery控制DIV層實(shí)現(xiàn)由大到小，由遠(yuǎn)及近動(dòng)畫變化效果,涉及jQuery基于animate方法操作頁(yè)面元素實(shí)現(xiàn)動(dòng)畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要給大家介紹了關(guān)于如何選擇jQuery版本，是1.x? 2.x?還是3.x? 在選擇使用jquery之前我們常常會(huì)考慮jQuery應(yīng)該選擇什么版本?現(xiàn)在jquery一般用什么版本以及jquery ie8的兼容版本和jquery什么版本穩(wěn)定等問題，下面通過這篇文章來看看詳細(xì)的介紹吧。2017-04-04
jQuery插件HighCharts實(shí)現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D面積圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制2D面積圖的相關(guān)步驟與屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery Easyui加載表格出錯(cuò)時(shí)在表格中間顯示自定義的提示內(nèi)容
這篇文章主要介紹了jQuery Easyui加載表格出錯(cuò)時(shí)在表格中間顯示自定義的提示內(nèi)容的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了jQuery性能優(yōu)化技巧,較為詳細(xì)的分析了jQuery的常見使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02