用JQuery 實現(xiàn)的自定義對話框
更新時間：2007年03月24日 00:00:00 作者：
JavaScript為我們提供幾種對話框功能，但功能都十分有限；雖然在IE下可以通過模式窗體的方式創(chuàng)建更豐富的對話框功能，但畢竟只有IE得到支持。為了得到更豐富的自定義對話框功能，于是用JQuery編寫了一個對話框插件；只需簡單地引用相關(guān)JavaScript就能得到豐富的自定義對話框功能。
插件功能特點:
允許通過CSS進(jìn)行外觀控制。
可以任意把面頁的元素作為對話框顯示。
當(dāng)對話框激活時，對話框外的任何元素不能接受鼠標(biāo)操作。
對話框可以在工作區(qū)范圍內(nèi)任意移動，根據(jù)工作區(qū)大小自適應(yīng)居中功能。
并不需要編寫復(fù)雜的JavaScript,通過簡單HTML屬性描述即可。
經(jīng)過測試插件可以在Firefox和IE下正常工作。
簡單使用描述：
引用JQuery和對話框插件文件：
<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
定義相關(guān)按鈕為行：
<input id="Button4" type="button" value="提問對話框" showoption="control:test2;width:220;height:120;title:對話框" />
定義相關(guān)對話框顯示的內(nèi)容:
<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偏移量;顯示內(nèi)容的元素對象，顯示內(nèi)容元素對象的父對象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//對話框?qū)ο螅瑢υ捒驅(qū)挾?，對話框高?nbsp;
var MessageBox_win,MessageBox_width,MessageBox_height;
//對話框是否處于移動狀態(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)建對話框容器
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è)置顯示時背景式樣
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è)置對話框試樣
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;3
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)3
{
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)閉模式對話框
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)題,對話框寄居的元素對象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();
});
});
});
插件功能特點:
允許通過CSS進(jìn)行外觀控制。
可以任意把面頁的元素作為對話框顯示。
當(dāng)對話框激活時，對話框外的任何元素不能接受鼠標(biāo)操作。
對話框可以在工作區(qū)范圍內(nèi)任意移動，根據(jù)工作區(qū)大小自適應(yīng)居中功能。
并不需要編寫復(fù)雜的JavaScript,通過簡單HTML屬性描述即可。
經(jīng)過測試插件可以在Firefox和IE下正常工作。
簡單使用描述：
引用JQuery和對話框插件文件：
<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
定義相關(guān)按鈕為行：
<input id="Button4" type="button" value="提問對話框" showoption="control:test2;width:220;height:120;title:對話框" />
定義相關(guān)對話框顯示的內(nèi)容:
<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>
下載例程和源碼
復(fù)制代碼 代碼如下:
/* JQuery 模式對話框插件
* writer: FanJianHan (henryfan@msn.com)
* License: GPL (GPL-LICENSE.txt) licenses.
*/
//是否已初始化過對話框
var MessageOninit = false;
//記錄body滾動條的x,y偏移量;顯示內(nèi)容的元素對象，顯示內(nèi)容元素對象的父對象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//對話框?qū)ο螅瑢υ捒驅(qū)挾?，對話框高?nbsp;
var MessageBox_win,MessageBox_width,MessageBox_height;
//對話框是否處于移動狀態(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)建對話框容器
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è)置顯示時背景式樣
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è)置對話框試樣
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;3
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)3
{
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)閉模式對話框
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)題,對話框寄居的元素對象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();
});
});
});
您可能感興趣的文章:
- jQuery Mobile的loading對話框顯示/隱藏方法分享
- jquery刪除提示框彈出是否刪除對話框
- jQuery UI庫中dialog對話框功能使用全解析
- JQuery彈出炫麗對話框的同時讓背景變灰色
- JQuery實現(xiàn)自定義對話框的代碼
- Jquery實現(xiàn)頁面加載時彈出對話框代碼
- jquery 模式對話框終極版實現(xiàn)代碼
- 6款經(jīng)典實用的jQuery小插件及源碼(對話框/提示工具等等)
- 自己使用js/jquery寫的一個定制對話框控件
- jQuery Dialog對話框事件用法實例分析
- jQuery實現(xiàn)時尚漂亮的彈出式對話框?qū)嵗?/a>
- jQuery實現(xiàn)定時隱藏對話框的方法分析
相關(guān)文章
JQuery入門——用映射方式綁定不同事件應(yīng)用示例
通過映射的方式，給對象綁定多個事件,可能有很多的童鞋們不從使用過，不過，沒有關(guān)系本文將一一為您詳細(xì)介紹，感興趣的朋友可不要錯過了啊，希望本文對你有所幫助2013-02-02
jQuery實現(xiàn)圖片與文字描述左右滑動自動切換的方法
這篇文章主要介紹了jQuery實現(xiàn)圖片與文字描述左右滑動自動切換的方法,涉及jquery實現(xiàn)圖文滑動切換效果的方法,涉及jquery針對頁面元素與樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)掃雷游戲第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
下面小編就為大家?guī)硪黄狫Query 傳送中文亂碼問題的簡單解決辦法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件，有需要的朋友可以參考一下2013-10-10
asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
由于需求需要用到一個滾動滾動條加載數(shù)據(jù)的下拉列表（假如數(shù)據(jù)1000條，下拉列表開始只顯示100條，當(dāng)用戶下拉滾到條到最底下時，再加載下一個100條，如此循環(huán)）2010-06-06
本文主要分享了jQuery實現(xiàn)文檔樹效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery中removeData()方法用法,實例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
jqPlot是一個灰常強大的圖表工具，曲線，柱狀，餅圖，應(yīng)該有盡有，更要命的是，調(diào)用方便~~2016-06-06
這里是本人學(xué)習(xí)jQuery Mobile的過程，現(xiàn)在將學(xué)習(xí)過程中的實例一一展現(xiàn)出來，希望能幫到更多的新手。本系列中實例都經(jīng)過了本人的親自測試。2016-01-01