用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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
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开发者的10个技巧
2011/02/25 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python扩展内置类型详解
2018/03/26 Python
详解python中递归函数
2019/04/16 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python利用opencv实现颜色检测
2021/02/23 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
《长城》教学反思
2014/02/14 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书