用JQuery 实现的自定义对话框

答案：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

上一个：dojo 之基础篇(三)之向服务器发送数据
下一个：实时编辑网页网页文字实时编辑，如同TEXTBOX一般