특정 요소를 클릭하면 표시되는 jQuery UI 대화 상자가 있습니다. 클릭이 트리거 요소 또는 대화 자체가 아닌 다른 곳에서 발생하면 대화 상자를 닫고 싶습니다.
다음은 대화 상자를 여는 코드입니다.
$(document).ready(function() {
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 50,
resizable: false,
width: 375
});
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html($hint.html());
$field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
/*$(document).click(function() {
$field_hint.dialog('close');
});*/
});
마지막 부분의 주석 처리를 제거하면 대화 상자가 열리지 않습니다. 대화 상자를 여는 동일한 클릭이 다시 닫히기 때문이라고 가정합니다.
최종 작업 코드
참고 : 이것은 이벤트 외부 에서 jQuery 플러그인을 사용하고 있습니다.
$(document).ready(function() {
// dialog element to .hint
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 0,
resizable: false,
width: 376
})
.bind('clickoutside', function(e) {
$target = $(e.target);
if (!$target.filter('.hint').length
&& !$target.filter('.hintclickicon').length) {
$field_hint.dialog('close');
}
});
// attach dialog element to .hint elements
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
$field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
// trigger .hint dialog with an anchor tag referencing the form element
$('.hintclickicon').click(function(e) {
e.preventDefault();
$($(this).get(0).hash + ' .hint').trigger('click');
});
});
답변
아웃 확인 의 jQuery 외부 이벤트가 플러그인
다음을 수행 할 수 있습니다.
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});
답변
오랜만에 끌어서 미안하지만 아래를 사용했습니다. 단점이 있습니까? 열기 기능보기 …
$("#popup").dialog(
{
height: 670,
width: 680,
modal: true,
autoOpen: false,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui)
{
$('.ui-widget-overlay').bind('click', function()
{
$("#popup").dialog('close');
});
}
});
답변
다른 플러그인을 사용하지 마십시오.
popin 외부를 클릭 할 때 jquery UI 대화 상자를 닫는 3 가지 방법은 다음과 같습니다.
대화 상자가 모달이거나 배경 오버레이가있는 경우 : http://jsfiddle.net/jasonday/6FGqN/
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 100,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
대화 상자가 모달이 아닌 경우 방법 1 : 방법 1 : http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
비 모달 대화 방법 2 : http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
답변
이 전역 스크립트를 추가하기 만하면 모든 모달 대화 상자를 닫습니다.
$(document).ready(function()
{
$(document.body).on("click", ".ui-widget-overlay", function()
{
$.each($(".ui-dialog"), function()
{
var $dialog;
$dialog = $(this).children(".ui-dialog-content");
if($dialog.dialog("option", "modal"))
{
$dialog.dialog("close");
}
});
});;
});
답변
$(".ui-widget-overlay").click (function () {
$("#dialog-id").dialog( "close" );
});
위의 코드가 작동하는 것을 보여주는 바이올린 .
답변
나는 두 부분을해야했다. 먼저 외부 클릭 핸들러 :
$(document).on('click', function(e){
if ($(".ui-dialog").length) {
if (!$(e.target).parents().filter('.ui-dialog').length) {
$('.ui-dialog-content').dialog('close');
}
}
});
이것은 dialog('close')
제네릭 ui-dialog-content
클래스를 호출 하므로 클릭이 하나에서 시작되지 않은 경우 모든 대화 상자 를 닫습니다 . 오버레이가 .ui-dialog
상자의 일부가 아니기 때문에 모달 대화 상자에서도 작동합니다 .
문제는:
- 대부분의 대화 상자는 대화 상자 외부의 클릭으로 인해 생성됩니다.
- 이 핸들러는 클릭이 대화 상자를 만들고 문서에 버블 링 된 후에 실행되므로 즉시 닫습니다.
이 문제를 해결하기 위해 해당 클릭 핸들러에 stopPropagation을 추가해야했습니다.
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});
답변
이 질문은 약간 오래되었지만 사용자가 어딘가를 클릭 할 때 모달이 아닌 대화 상자를 닫으 려는 경우 JQuery UI Multiselect 플러그인 에서 가져온 이것을 사용할 수 있습니다 . 가장 큰 장점은 클릭이 “손실”되지 않는다는 것입니다 (사용자가 링크 나 버튼을 클릭하려는 경우 작업이 완료 됨).
$myselector.dialog({
title: "Dialog that closes when user clicks outside",
modal:false,
close: function(){
$(document).off('mousedown.mydialog');
},
open: function(event, ui) {
var $dialog = $(this).dialog('widget');
$(document).on('mousedown.mydialog', function(e) {
// Close when user clicks elsewhere
if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
$myselector.dialog('close');
}
});
}
});