用JQuery 实现的自定义对话框


Posted in Javascript onMarch 24, 2007

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" 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;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();  
    }  
}  
//关闭模式对话框  
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();  
        });  
    });      
}); 
Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
js实现继承的5种方式
Dec 01 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
JQuery 简便实现页面元素数据验证功能
Mar 24 #Javascript
AutoSave/自动存储功能实现
Mar 24 #Javascript
用 javascript 实现的点击复制代码
Mar 24 #Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 #Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 #Javascript
漂亮的提示信息(带箭头)
Mar 21 #Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 #Javascript
You might like
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Django的用户模块与权限系统的示例代码
2019/07/24 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python如何安装下载后的模块
2020/07/03 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
机械专业求职信
2014/05/25 职场文书
护士自荐信怎么写
2015/03/06 职场文书
公司备用金管理制度
2015/08/04 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技