Jump to content
  • 0

Закрытие окна вне его области, баг как исправить


chiffenok
 Share

Question

Добрый день мне нужно сделать закрытие окна вне его области, задача простая, но у меня какой то странный баг получается

Мою верстку можно посмотреть здесь. Внизу есть блок Планируем поступления и ссылка Сообщить о поступлении если на нее нажать то появляется окно. Нажимаешь мне области окна за исключением этой ссылки оно исчезает, но если опять нажать на эту же ссылку повторно то окно появляется токо после второго клика. Побывала уже не сколько, скриптов наверно не в них дело но отловить в чем дело я не могу( Подскажите в чем дело


$(document).click(function(e){ var elem = $(".b-product__report-form"); if(e.target!=elem[0]){ elem.hide(); } })

document.onclick = function () {
$(".b-product__report-form").hide();
}

$(document).click(function(e){
if ($(e.target).parents().filter('.b-product__report-form:visible').length != 1) {
$('.b-product__report-form').hide();
}
});

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Возможно click по ссылке также обрабатывает $(document).click...

Если еще актуально можно попробовать, что-то подобное:

<div class="block">
<a class="link" href="#">Link</a>
<form class="form" style="display:none;">
<input type="text" value="Text">
</form>
</div>
<div class="block">
<a class="link" href="#">Link</a>
<form class="form" style="display:none;">
<input type="text" value="Text">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".link").click(function() {
if ( $(this).is('.activated-link') ) {
$(this).removeClass('activated-link');
$(this).next().removeClass('activated-form');
$(this).next().hide();
} else {
$('.link').removeClass('activated-link');
$('.form').removeClass('activated-form');
$('.form').hide();
$(this).addClass('activated-link');
$(this).next().addClass('activated-form');
$(this).next().show();
}
});
//update
$(document).click(function(event) {
if (!$(event.target).is(".link, .form input")) {
$('.activated-form').hide();
$('.form').removeClass('activated-form');
}
});
});?
</script> ?

http://jsfiddle.net/EBawh/2/

Edited by Cryolite
Link to comment
Share on other sites

  • 0

да еще актуально, но такой же результат, я специально уточнила что дело скорее всего не в самом скрипте а в чем то другом

+ у вашего скрипта есть 1большой недостаток окно закрывается и по клику в нем

Link to comment
Share on other sites

  • 0

нашла я решение еле как , пришлось поправить вызов окна

	function report (blockReport) {
$('.' + blockReport + '__report span').click( function(){
var that = $(this).parent('.' + blockReport + '__report').siblings('.' + blockReport + '__report-form');
if (that.is(':hidden')) {
$('.' + blockReport + '__report-form').slideUp(300);
that.slideDown(300);
}
else {
that.slideUp(300);
}
});
$(document).click(function(e) {
console.log(e);
var target = $(e.target);
var parent = target.parents('.' + blockReport + '__report-form');

if(!target.is('.' + blockReport + '__report-form') && !target.is('.' + blockReport + '__report span') && !parent.length) {
$('.' + blockReport + '__report-form:visible').slideUp(300);
}
});

}
report ('b-product');
report ('b-card');
report ('b-filter-result');

Edited by chiffenok
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy