[英]Basic Popup window not working properly
Having a small problem with a popup window I am trying to create. 我尝试创建的弹出窗口有一个小问题。
When a button(anything with a certain ID) is clicked it should open(this seems to work) but then when it is open I want it so if you click on anything but the main popup window it should close. 当单击一个按钮(具有特定ID的任何按钮)时,它应该打开(这似乎起作用),但是当我打开它时,我想要它,因此,如果您单击除主弹出窗口之外的任何内容,它都应该关闭。
But it does not seem to close when I click on the .overeverythingCover which has width: 100% and height: 100%; 但是,当我单击宽度为100%,高度为100%的.overeverythingCover时,它似乎没有关闭。
http://jsfiddle.net/mnW7U/ http://jsfiddle.net/mnW7U/
$('#activatePopOver, .overeverythingCover').click(function() {
popUpOverEverything();
});
function popUpOverEverything(data) {
// if exists | remove it
if ($('.overeverythingCover').length) {
$('.overeverythingCover').empty();
$('.overeverythingCover').removeClass();
$('body').css('overflow', 'scroll');
console.log("hehe");
} else {
$('body').append('<div class="overeverythingCover"</div>');
$('.overeverythingCover').append('<div class="overEverything"</div>');
$('body').css('overflow', 'hidden');
$('.overEverything').html(data);
};
}
Thank you! 谢谢!
You can't use "click" handler to an element which not exist yet. 您不能对尚不存在的元素使用“点击”处理程序。 You can use .live :
您可以使用.live:
$(function() {
$('#activatePopOver, .overeverythingCover').live('click', function() {
popUpOverEverything();
});
function popUpOverEverything(data) {
if ($('.overeverythingCover').length > 0) {
$('.overeverythingCover').remove();
$('body').css('overflow', 'scroll');
} else {
$('body').append('<div class="overeverythingCover"</div>');
$('.overeverythingCover').append('<div class="overEverything"</div>');
$('body').css('overflow', 'hidden');
$('.overEverything').html(data);
// Just close when you click outside the popup
$('.overEverything').click(function(event){
event.stopPropagation();
});
};
}
});
See the Fiddle : http://jsfiddle.net/mnW7U/3/ 参见小提琴: http : //jsfiddle.net/mnW7U/3/
use a delegate event listener such as: 使用委托事件侦听器,例如:
$(document).on("click", '#activatePopOver, .overeverythingCover', function() {
popUpOverEverything();
});
Like The Wobbuffet mentioned, the issue is that the .overerverythingCover
div isn't on the page at the time you're binding your event. 就像提到的Wobbuffet一样,问题在于绑定事件时页面上没有
.overerverythingCover
div。
NOTE: This will only work with jQuery 1.7+ 注意:这仅适用于jQuery 1.7+
for older versions you can use .delegate()
对于较旧的版本,您可以使用
.delegate()
The problem was that you are binding a click event to an element that not yet exists on the page. 问题是您将click事件绑定到页面上尚不存在的元素。
I have updated your fiddle with a simple to understand example: http://jsfiddle.net/mnW7U/2/ 我用一个简单易懂的示例更新了您的小提琴: http : //jsfiddle.net/mnW7U/2/
I created a popDown()
function that gets bound with the following function when the button is clicked: 我创建了一个
popDown()
函数,该函数在单击按钮时与以下函数绑定:
$('.overeverythingCover').click(function() {
popDown();
});
The problem is this: 问题是这样的:
$('body').append('<div class="overeverythingCover"</div>');
It is being appended after the click event is added to it. 将click事件添加到该事件之后,将其追加。 Try adding it to the dom (none-js in the html) then messing with it's
display
property. 尝试将其添加到dom(html中的none-js),然后弄乱它的
display
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.