用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.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（）;
        }）;
    }）;
}）;