![](/img/trans.png)
[英]How to make kendo popup editor AUTO-CLOSE when click outside of the popup window?
[英]How to identify when a click is made outside the popup window?
我有一个弹出窗口,在内部点击时消失,但我的目的是让它在外面点击时消失。
目前弹出窗口工作正常,但只要我在窗口内单击就会消失。 当我在窗外点击时,它会停留。 我如何让它以无人问津的方式运作?
代码为:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.invite_room_btn').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.invite_room_btn'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
HTML是:
<span class="invite_room_btn">
<div class="messagepop pop">
</div>
</span>
谢谢!
您的问题可以解释为“ 如何识别弹出窗口外的点击 ”?
正如这里建议的那样,你可以通过差异来工作,检查点击发生在除弹出窗口之外的任何地方(最后是其他一些元素)
这可以通过以下方式实现:
HTML代码可能是这样的:
<div id="popup" class="popup">
Content
<div>DIV inside</div>
</div>
<button id="open">Open</button>
而javascript是:
$(document).ready(function () {
$('#popup').hide()
});
$('#open').on('click', function () {
$('#popup').show(500)
});
$(document).mouseup(function (e) {
var popup = $("#popup");
if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(500);
}
});
一些CSS样式的完整示例: http : //jsfiddle.net/sLdmxda8/2/
我用下面的代码想出来了!
$(document).ready(function () {
$('.messagepop').hide()
});
$('.invite_room_btn').on('click', function () {
if($(this).hasClass("selected")) {
var popup = $(".messagepop");
popup.hide(150);
$(".invite_room_btn").removeClass("selected");
}
else {
$('.messagepop').show(150);
$('.invite_room_btn').addClass("selected");
}
});
$(document).mouseup(function (e) {
var popup = $(".messagepop");
if (!$('.invite_room_btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(150);
}
});
谢谢您的帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.