JQuery_jquery로 구현된 사용자 정의 대화 상자

JavaScript는 여러 대화 상자 기능을 제공하지만 기능은 매우 제한적입니다. IE에서 모달 형식을 통해 더 풍부한 대화 상자 기능을 만들 수 있지만 결국 IE만 지원됩니다. 보다 풍부한 사용자 정의 대화 상자 기능을 얻기 위해 JQuery를 사용하여 대화 상자 플러그인을 작성했습니다. 관련 JavaScript를 인용하기만 하면 풍부한 사용자 정의 대화 상자 기능을 얻을 수 있습니다.
플러그인 기능:
CSS를 통해 모양을 제어할 수 있습니다.
페이지의 모든 요소를 ​​대화 상자로 표시할 수 있습니다.
대화 상자가 활성화되면 대화 상자 외부의 모든 요소는 마우스 작업을 허용할 수 없습니다.
대화 상자는 작업 영역 내에서 임의로 이동할 수 있으며, 센터링 기능은 작업 영역의 크기에 따라 적응됩니다.
복잡한 JavaScript를 작성할 필요 없이 간단한 HTML 속성으로 설명하면 됩니다.
플러그인은 테스트를 거쳤으며 Firefox 및 IE에서 정상적으로 작동할 수 있습니다.
간단한 사용법 설명:
JQuery 및 대화 상자 플러그인 파일 참조:
;/script>
해당 버튼을 행으로 정의:

관련 대화 상자에 표시되는 콘텐츠를 정의합니다.

JQuery 모달 대화상자 플러그인은 사용하기 쉬운가요?
                                 tr< ;input id="Button6" onclick="CloseMessageBox()" type="button" value="No" />
> 




루틴 및 소스 코드 다운로드





코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

/* 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);
지역 = GetDocumentRegion()
CSS ={width:region.width "px",height:region.height "px",
왼쪽: MessageBox_scrollleft 'px',top: MessageBox_scroll 상단 '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)'
                         } 
     } 
//대화상자 샘플 설정
function SetStyle(option)
{
var 지역,css;
지역 = GetDocumentRegion()
css = {width:MessageBox_width 'px',height:MessageBox_height 'px',
왼쪽: ((region.width - MessageBox_width)/2) 'px',top: ((region.height - MessageBox_height)/2) 'px'}
if(region.height < ; MessageBox_height )//본체 표시 높이가 대화 상자 높이보다 작은 경우
                                                                                                      🎜> css.top =((region.height - MessageBox_height)/2) 'px'
} }
$('#messagebox_win').css(css);
css.top='0px';
css .left='0px'
           $('#messagebox_table') 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')); 

    } 
    함수 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 {높이:h,너비:w}; 
    } 
    function handleMouseMove(e) 
    { 
        var left,top,region; 
        if (MessageBox_Moving) 
        { 
            var evt = e || 이벤트; 
            왼쪽 =evt.clientX cx-down_x; 
            top = evt.clientY cy-down_y; 
            지역 = GetDocumentRegion(); 
            if(왼쪽  MessageBox_width > region.width) 
            { 
               왼쪽 = region.width - 10- MessageBox_width; 
            } 
            if(top   MessageBox_height >region.height)3 
           { 
              top = region.height-10 - MessageBox_height ; 
           } 
            if(왼쪽 <10) 
               왼쪽 =10; 
            if(상위 <10) 
                상위 = 10; 
           var css ={left:left 'px',top:top 'px'} 
            $('#messagebox_move').css(css); 
        } 
    } 
    function handleMouseUp() 
    { 
        if(MessageBox_Moving) 
        { 
            MessageBox_win.cs s('너비',$('#messagebox_move').css ("너비")); 
            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'). 제거();
$('#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 속성 = $(this).attr('showoption').split(' ;')
for(i=0;i { > ;1)                                                                                                                              
$(this).click(function(){
ShowMessageBox(옵션);
document.body.focus();
})
}) ;