JQuery实现自定义对话框

JQuery频道 >

时间: 2008-04-15 23:34

JavaScript为我们提供几种对话框功能，但功能都十分有限；虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有IE得到支持。为了得到更丰富的自定义对话框功能，于是用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" type="button" value="是" />

<input id="Button6" 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"><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);

}

//设置显示时背景式样

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)

{