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

为了得到更丰富的自定义对话框功能，于是用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”><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)

{

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

时间： 2024-09-20 11:02:25

JQuery实现自定义对话框的代码_jquery的相关文章

Jquery实现自定义tooltip示例代码_jquery

Jquery实现自定义tooltip,具体代码如下 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

jQuery组件easyui对话框实现代码_jquery

本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Dialog - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyu

Jquery实现自定义tooltip示例代码

 这篇文章主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下 Jquery实现自定义tooltip,具体代码如下   代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %>    <!DOCTYPE h

jQuery自定义数值抽奖活动代码_jquery

本文实例为大家分享了jquery输入数字随机抽奖特效代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/ja

基于JQuery的Pager分页器实现代码_jquery

实例效果图如下 使用说明 需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备 分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码 代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list

jQuery实现自定义事件的方法_jquery

本文实例讲述了jQuery实现自定义事件的方法.分享给大家供大家参考.具体分析如下: jQuery是一个非常强大的工具.jQuery非常有用的功能之一是可以实现事件绑定.你可以实现创建,绑定事件,可触发自己定义的jQuery事件. 自定义事件触发 下面的代码是它自定义事件触发.你可以绑定到这个自定义事件. $event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. $(this).bind("

jQuery实现进度条效果代码_jquery

在某些特定的场景下,应用进度条效果,可以提高网站的人性化程度,能够让用户能够掌握进度,增加对进度的耐心,否则可能直接导致关闭页面,从来导致网站流失用户,下面就是用过jQuery实现的进度效果代码. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam

jQuery AJAX 调用WebService实现代码_jquery

用jQuery调用其他项目的WebService 实现登录验证功能 html输入用户名密码: 代码 复制代码 代码如下: <table style="width: 400px"> <tr> <td style="width: 200px" class="left"> Login ID: </td> <td style="width: 200px" class="l

jQuery实现三级菜单的代码_jquery

上周新接手一个网站建设的活儿,其中有需要要jquery代码实现三级菜单的需求,其实说难也不难,下面小编把代码分享给大家,供大家参考. 先给大家展示下效果图,如果大家感觉还不错的话,请参考实现代码. HTML代码: <body> <div class="navMenu"> <ul> <li><a href="#">首页</a> <ul> <li><a href=&qu