jQuery UI-외부를 클릭하면 대화 상자 닫기
특정 요소를 클릭하면 표시되는 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 outside events 플러그인을 사용하고 있습니다.
$(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');
}
});
}
});
추가 플러그인을 사용하지 않고도이 작업을 수행 할 수 있습니다
var $dialog= $(document.createElement("div")).appendTo(document.body);
var dialogOverlay;
$dialog.dialog({
title: "Your title",
modal: true,
resizable: true,
draggable: false,
autoOpen: false,
width: "auto",
show: "fade",
hide: "fade",
open:function(){
$dialog.dialog('widget').animate({
width: "+=300",
left: "-=150"
});
//get the last overlay in the dom
$dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
$dialogOverlay.unbind();
$dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
$dialog.dialog("close");
});
}
});
여기 $ dialog가 대화 상자입니다. 우리가 기본적으로하는 일은이 대화 상자가 열릴 때마다 마지막 오버레이 위젯을 가져 와서 클릭 핸들러를 해당 오버레이에 바인딩하여 오버레이를 클릭 할 때마다 $ 대화 상자를 닫는 것입니다.
외부 이벤트 플러그인이 필요하지 않습니다 ...
just add an event handler to the .ui-widget-overlay div:
jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
jQuery("#ui-dialog-selector-goes-here").dialog("close");
return false;
});
just make sure that whatever selector you used for the jQuery ui dialog, is also called to close it.. i.e. #ui-dialog-selector-goes-here
This doesn't use jQuery UI, but does use jQuery, and may be useful for those who aren't using jQuery UI for whatever reason. Do it like so:
function showDialog(){
$('#dialog').show();
$('*').on('click',function(e){
$('#zoomer').hide();
});
}
$(document).ready(function(){
showDialog();
});
So, once I've shown a dialog, I add a click handler that only looks for the first click on anything.
Now, it would be nicer if I could get it to ignore clicks on anything on #dialog and its contents, but when I tried switching $('*') with $(':not("#dialog,#dialog *")'), it still detected #dialog clicks.
Anyway, I was using this purely for a photo lightbox, so it worked okay for that purpose.
The given example(s) use one dialog with id '#dialog', i needed a solution that close any dialog:
$.extend($.ui.dialog.prototype.options, {
modal: true,
open: function(object) {
jQuery('.ui-widget-overlay').bind('click', function() {
var id = jQuery(object.target).attr('id');
jQuery('#'+id).dialog('close');
})
}
});
Thanks to my colleague Youri Arkesteijn for the suggestion of using prototype.
This is the only method that worked for me for my NON-MODAL dialog
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('#dlg').dialog("close");
}
});
All credit goes to Axle
Click outside non-modal dialog to close
For those you are interested I've created a generic plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent
I use this solution based in one posted here:
var g_divOpenDialog = null;
function _openDlg(l_d) {
// http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
jQuery('body').bind(
'click',
function(e){
if(
g_divOpenDialog!=null
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
_closeDlg();
}
}
);
setTimeout(function() {
g_divOpenDialog = l_d;
g_divOpenDialog.dialog();
}, 500);
}
function _closeDlg() {
jQuery('body').unbind('click');
g_divOpenDialog.dialog('close');
g_divOpenDialog.dialog('destroy');
g_divOpenDialog = null;
}
I had same problem while making preview modal on one page. After a lot of googling I found this very useful solution. With event and target it is checking where click happened and depending on it triggers the action or does nothing.
$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content'))
return;
} else {
$('#modal-background').hide();
}
});
İt's simple actually you don't need any plugins, just jquery or you can do it with simple javascript.
$('#dialog').on('click', function(e){
e.stopPropagation();
});
$(document.body).on('click', function(e){
master.hide();
});
I don't think finding dialog stuff using $('.any-selector') from the whole DOM is so bright.
Try
$('<div />').dialog({
open: function(event, ui){
var ins = $(this).dialog('instance');
var overlay = ins.overlay;
overlay.off('click').on('click', {$dialog: $(this)}, function(event){
event.data.$dialog.dialog('close');
});
}
});
You're really getting the overlay from the dialog instance it belongs to, things will never go wrong this way.
With the following code, you can simulate a click on the 'close' button of the dialog (change the string 'MY_DIALOG' for the name of your own dialog)
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
스마트 코드 : 모든 것이 명확하고 읽을 수 있도록 다음 코드를 사용하고 있습니다. 몸통 바깥 쪽이 대화 상자를 닫습니다.
$(document).ready(function () {
$('body').on('click', '.ui-widget-overlay', closeDialogBox);
});
function closeDialogBox() {
$('#dialog-message').dialog('close');
}
참고 URL : https://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
'Programing' 카테고리의 다른 글
| 사용자의 양식 크기 조정을 비활성화하려면 어떻게합니까? (0) | 2020.07.28 |
|---|---|
| Swift Xcode 6에서 버튼 텍스트를 변경하는 방법은 무엇입니까? (0) | 2020.07.28 |
| 배열에서 임의의 값을 얻는 방법? (0) | 2020.07.28 |
| jQuery 및 CSS-표시 제거 / 추가 : 없음 (0) | 2020.07.28 |
| htaccess 액세스 제어 허용 원본 (0) | 2020.07.28 |