[英]Javascript close dialog if the if the user did click somewhere else
On my website I open a modal / dialog with JavaScript, how ever when the user clicks on another tab on the same view the modal will still be there and be in the way. 在我的网站上,我使用JavaScript打开了一个模态/对话框,但是当用户单击同一视图上的另一个选项卡时,模态仍然会存在并且会一直存在。 So if the user clicks of the modal I would like to close it.
因此,如果用户单击模态,我想将其关闭。 But I am not sure how to do it, I know the OnBlur attribute but I haven't come up with a solution that works just yet.
但是我不确定该怎么做,我知道OnBlur属性,但是我还没有想出一个可行的解决方案。 This is my script:
这是我的脚本:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 220,
width: 305,
modal: true,
buttons: {
'Spara': function () {
if (!validateNumber()) {
alert('Procent måste vara mellan 0-100');
return false;
}
if (!validateProject()) {
alert('Du måste välja ett project');
return false;
}
if (!validateDate()) {
return false;
}
locstring = "@(Url.Action("Index"))/Update/?";
locstring += '&projectId=' + $('#projectList').val();
locstring += '&startDate=' + $('#startDate').val();
locstring += '&endDate=' + $('#endDate').val();
locstring += '&pct=' + $('#pct').val();
var sid = $('#sId').text();
if (sid !== "") {
locstring += '&id=' + sid;
}
$.ajax({
type: "GET",
url: locstring,
dataType: "html",
success: function (data) {
$('#dialog').dialog('close');
reloadTable();
}
});
},
'Avbryt': function () {
$(this).dialog('close');
},
'Ta bort': function () {
var sid = $('#sId').text();
if (sid != "") {
locstring = "@(Url.Action("Index"))/Delete/" + sid;
$.ajax({
type: "GET",
url: locstring,
dataType: "html",
success: function(data) {
$('#dialog').dialog('close');
reloadTable();
}
});
}
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#create-user').click(function() {
$('#dialog').dialog('open');
})
.hover(
function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
}
).mousedown(function() {
$(this).addClass("ui-state-active");
})
.mouseup(function() {
$(this).removeClass("ui-state-active");
});
});
Have a flag called isShowing
which is set to true
when the dialog is showing, and attach an event listener to the body or your main container which checks for a click. 有一个名为
isShowing
的标志,在显示对话框时将其设置为true
,并将事件侦听器附加到主体或您的主容器中,以检查是否单击。 Then check if the flag isShowing
is true, if it is true
then hide the dialog. 然后检查标志
isShowing
是否为true,如果为true
则隐藏对话框。
Edit 1 编辑1
Another solution, 另一个解决方案
HTML 的HTML
<div id="dialog">Some demo text here.</div>
<div>some other demo text</div>
CSS 的CSS
#dialog {
height: 300px;
width: 300px;
border: 2px solid orange;
}
JavaScript 的JavaScript
document.addEventListener("click", function (e) {
if (e.target.id != "dialog") {
document.getElementById("dialog").style.display = "none";
}
});
Here were are comparing the ID of the element clicked and if it does not equal to dialog then we hide the dialog. 这里是比较单击的元素的ID,如果它不等于对话框,那么我们将隐藏对话框。
Example 例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.