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;³

         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)³

            {

                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();

        });

    });    

});