jquery 모달 윈도우 도움말

Question

jquery를 배우려는 노력의 일환으로, 저는 자신의 모달 윈도우를 만들고 있습니다. 지금까지는 문제가 없지만 오버레이를 클릭하면 닫기를 시작할 수 없습니다. 누구든지 어떤 아이디어?

현재 jsbin에 확인할 수 있습니다 - http://jsbin.com/irado은

여기 내 스크립트입니다 : jQuery Dialog를 사용

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
// Pause Function 
    $j.fn.pause = function(duration) { 
    $j(this).animate({ dummy: 1 }, duration); 
    return this; 
}; 
// Add our click ON event 
$j(".open").click(function() { 
// IE6 select box iframe hack 
if (jQuery.browser.msie) { 
if(parseInt(jQuery.browser.version) == 6) { 
    $j('body').prepend('<iframe style="z-index: 999; width:100%; height:100%; filter: alpha(opacity=0); left: 0px; zoom: 1; position: absolute; top: 0px;" src="javascript:false;"></iframe>'); 
}}; 
// Add our overlay div 
$j('body').prepend('<div id="overlay" />'); 
// Fade in overlay 
$j('#overlay').animate({"opacity":"0.2"}, 300), 
// Animate our modal window into view 
$j('#window').css({"top":"45%"}).pause(200).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 300) 
}); 
    // Add our click OFF event 
$j('a.close, #overlay').click(function() { 
//Animate our modal window out of view 
$j('#window').animate({"top": "55%", "opacity": "0"}, 300).fadeOut(200), 
// Fade out and remove our overlay 
$j('#overlay').pause(500).fadeOut(200, function() { $j(this).remove()}) 
}); 

}); 

Answer 1

문제가있는 이유는 오버레이에 클릭 이벤트를 첨부하려고하기 때문입니다. 클릭 이벤트의 바인딩을 ".open"요소의 click 이벤트 내에서 이동 시키십시오.이 요소는 "#overlay"를 본체에 추가하는 위치이기 때문입니다.

이 시도 :

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
// Pause Function 
    $j.fn.pause = function(duration) { 
    $j(this).animate({ dummy: 1 }, duration); 
    return this; 
};  
// Add our click ON event 
$j(".open").click(function() { 
// IE6 select box iframe hack 
if (jQuery.browser.msie) { 
    if(parseInt(jQuery.browser.version) == 6) { 
     $j('body').prepend('<iframe style="z-index: 999; width:100%; height:100%;  filter:alpha(opacity=0); left: 0px; zoom: 1; position: absolute; top: 0px;" src="javascript:false;"></iframe>'); 
}}; 
// Add our overlay div 
$j('body').prepend('<div id="overlay" />'); 
// Fade in overlay 
$j('#overlay').animate({"opacity":"0.2"}, 300), 
// Animate our modal window into view 
$j('#window').css({"top":"45%"}).pause(200).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 300) 

    // Add our click OFF event 
    $j('a.close, #overlay').click(function() { 
    //Animate our modal window out of view 
    $j('#window').animate({"top": "55%", "opacity": "0"}, 300).fadeOut(200), 
    // Fade out and remove our overlay 
    $j('#overlay').pause(500).fadeOut(200, function() { $j(this).remove()}) 
    }); 

}); 

을});

Answer 2

훨씬 쉬울 수 있습니다. 그것은 당신이 사용할 수있는 '모달'플래그와 함께 제공됩니다. 확인 해봐.