用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 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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中substr()函数参数说明及用法实例
2014/11/15 PHP
php文件操作相关类实例
2015/06/18 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python实现桌面气泡提示功能
2019/07/29 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
数控技术专业推荐信
2013/11/01 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
售后服务承诺书
2014/03/26 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
数据保密承诺书
2014/06/03 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
债务纠纷代理词
2015/05/25 职场文书
惊天动地观后感
2015/06/10 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书