Custom dialog box implemented with JQuery_jquery

JavaScript provides us with several dialog box functions, but the functions are very limited; although richer dialog box functions can be created through modal forms under IE, after all, only IE is supported. In order to get richer custom dialog box functions, I wrote a dialog box plug-in using JQuery; you can get rich custom dialog box functions by simply quoting the relevant JavaScript.
Plug-in features:
Allows appearance control through CSS.
You can display any element of the page as a dialog box.
When the dialog box is activated, any elements outside the dialog box cannot accept mouse operations.
The dialog box can be moved arbitrarily within the work area, and the centering function is adaptive according to the size of the work area.
There is no need to write complex JavaScript, just describe it through simple HTML attributes.
The plug-in has been tested and can work normally under Firefox and IE.
Simple usage description:
Reference to JQuery and dialog plug-in files:
;/script>
Define the relevant button as a row:

Define the content displayed in the relevant dialog box:

Is the JQuery modal dialog plug-in easy to use?
             
                                                      tr> < ;input id="Button6" onclick="CloseMessageBox()" type="button" value="No" />
> 




Download routines and source code




Copy the code The code is as follows:

/* 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)
                                                                             (document.body).append(html); css,region;
region = GetDocumentRegion();
css ={width:region.width "px",height:region.height "px",
left: MessageBox_scrollleft 'px',top: MessageBox_scroll top 'px'}
GetOpacity(css);
$("#messagebox_enabled").css(css);
$("#messagebox_enabledframe").css(css);
} 🎜 > //Set transparent style
function GetOpacity(css)
{
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{ css.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
                              } 
     } 
//Set dialog sample
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 )//If the height of the body display is less than the height of the dialog box
                                                                                                                          🎜> css.top =((region.height - MessageBox_height)/2) 'px'
} }
$('#messagebox_win').css(css);
css.top='0px';
css .left='0px';
             $('#messagebox_table') .css(css); ('#messagebox_title_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 <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();
}

}
//Close mode Dialog box
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;
var option ={control:'',width:'400',height:'400',title:'',parent:null};
var properties = $(this).attr('showoption').split(' ;');
for(i=0;i { >1)                                                                                                                                                
$(this).click(function(){
ShowMessageBox(option);
document.body.focus();
});
});
}) ;