用JQuery 实现的自定义对话框_jquery

JavaScript为我们提供几种对话框功能，但功能都十分有限；虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有IE得到支持。为了得到更丰富的自定义对话框功能，于是用JQuery编写了一个对话框插件；只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。
插件功能特点:
       允许通过CSS进行外观控制。
       可以任意把面页的元素作为对话框显示。
       当对话框激活时，对话框外的任何元素不能接受鼠标操作。
       对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
       并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
       经过测试插件可以在Firefox和IE下正常工作。
简单使用描述：
       引用JQuery和对话框插件文件：
       <script></script>
<script></script>   
       定义相关按钮为行：
       
       定义相关对话框显示的内容:
    

        
            
                
            
            
                
            
        

                    JQuery模式对话框插件好用吗?

    

下载例程和源码

复制代码 代码如下:

/* 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='

' 
    enabledframe=''; 
    $('#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='

'; 
        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         { 
            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('

'); 
         $('#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                 left =10; 
            if(top                 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        { 
            namevalue = properties[i].split(':'); 
            if(namevalue.length >1) 
            { 
                execute ="option." + namevalue[0] +'=\''+ namevalue[1]+'\';'; 
                eval(execute); 
            } 
        } 
        $(this).click(function(){ 
            ShowMessageBox(option); 
            document.body.focus(); 
        }); 
    });     
});