我有一个弹出窗口,在单击内部时消失,但我的目的是使其在单击外部时消失。
目前,弹出窗口工作正常,但每当我在窗口内单击时它就会消失。当我在窗口外单击时,它会保留下来。我如何让它以相反的方式工作?
Code as:
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>
Thanks!
你的问题可以解释为“如何识别何时在弹出窗口之外进行点击"?
按照建议here,您可以通过差异进行工作,检查单击是否发生在弹出窗口(以及最终的一些其他元素)之外的任何地方
这可以通过以下方式实现:
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/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)