Скрыть 2 div'a после клика вне первого.
Собственно, сабж.
Текущий код умеет: При нажатии на кнопку ОК (#mc-embedded-subscribe) вылезает попап с одним из двух div'ов (#mce-error-response или #mce-success-response) (эта часть кода храниться на сервере, предоставляющем API). Вместе с этими дивами вылезает блок, который затемняет весь background (#modal-bg). При клике вне попапа он закрывается. Как сделать, чтобы вместе с ним закрывался и затемняющий background блок? И как можно красиво переписать существующий JS код? Большое спасибо.
<div id="mce-responses">
<div id="mce-error-response" style="display:none" ></div>
<div id="mce-success-response" style="display:none"></div>
</div>
<div id="modal-bg" style="display:none">
<input type="submit" value="ОК" id="mc-embedded-subscribe" onClick="show();">
<script>
function show(){
document.getElementById('modal-bg').style.display = 'block';
}
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
if((e.target || e.srcElement).id != 'mce-success-response') {
document.getElementById('mce-success-response').style.display = 'none';
}
if((e.target || e.srcElement).id != 'mce-error-response') {
document.getElementById('mce-error-response').style.display = 'none';
}
}
}
|
Franz,
как можно нажать на ок если кнопка в невидимом блоке |
Не понял.
Input, который является кнопкой, активен. Никаких скрывающих свойств не указано. |
Franz, классика делегирования
function show() {
document.getElementById('modal-bg').style.display = 'block';
}
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
var target = event.target || event.srcElement;
while(target != this) {
if (target.id == 'mce-responses') {
return
}
target = target.parentNode;
}
document.getElementById('mce-success-response').style.display = 'none';
document.getElementById('mce-error-response').style.display = 'none';
document.getElementById('modal-bg').style.display = 'none';
}
}
|
Спасибо за ответ.
Простите, моё изучение JS началось час назад и поэтому вопрос: это дополняющий код или заменяющий? Если заменяющий, то после его вставки #modal-bg перестал появляться. |
Franz,
строка 9 добавьте вашу кнопку в число запретных
if (target.id == 'mce-responses' || target.id == 'mc-embedded-subscribe') {
|
Всё работает, супер. Спасибо.
Теперь буду думать как всё это оптимизировать. |
Снова здравствуйте.
Выяснилось, что не такая реализация не работает под android. Окно открывается, но закрыть его уже не выходит. Какие могут быть причины? UPD: Как можно поменять скрипт так, чтобы modal-bg открывался только в случае открытия mce-success-response\error? Потому что сейчас может случиться так: пользователь промахнулся\случайно нажал на кнопку ОК - попап не вылез, а затенение появилось. |
Franz,
может там target = event.targetTouches[0] a "click"="touchstart" |
Пардон, но "там" это где?
А настройках браузера? Или где-то в скрипте? |
Franz,
править естественно скрипт -- чтоб он учитывал специфику android -- неподскажу http://javascript.ru/forum/mobile/ не моя стихия |
В любом случае, спасибо за направление :)
Цитата:
|
Franz,
так проверьте состояние перед показом
function show() {
if(document.getElementById('mce-success-response').offsetWidth || document.getElementById('mce-error-response').offsetWidth) document.getElementById('modal-bg').style.display = 'block';}
|
Спасибо.
Я понимаю логику, но сам язык ещё толком не знаю. Буду учиться. |
Странно, но теперь окно перестало появляться совсем.
UDP: такой вариант тоже не работает.
function show() {
if(document.getElementById('mce-success-response').style.display == 'block' || document.getElementById('mce-error-response').style.display == 'block')
document.getElementById('modal-bg').style.display = 'block';
}
|
Franz,
делайте макет или сами проверьте данные 'block' или что иное offsetWidth или что ранее ваше окно откроется или клик сработает. |
О каком макете идёт речь?
|
Franz,
макет - код который можно запустить тут или http://learn.javascript.ru/play --минимальный чтоб можно было локализовать проблему а не гадать. а фон должен открываться не кнопкой а той функций что открывает окно |
К сожалению та функция, которая открывает окно недоступна. За неё отвечает mailchimp. Именно поэтому такие танцы с бубном.
Нет никаких хотя бы костыльных решений? :) UPD: Тут лежит JS файл, который отвечает за всю эту кухню: http://s3.amazonaws.com/downloads.ma...mc-validate.js Если сделать поиск по ID (mce-error-response/mce-success-response), то можно найти блок с их вызовом. Только я так ничего и не добился, изучая это :\ |
Franz,
ставить фон по таймеру - всё тоже offsetWidth или 'block' но с задержкой на время открытия окна |
Таймер реализовать средствами js?
|
Цитата:
добавьте $('#modal-bg').show() |
Franz,
mce_success_cb: function(resp){
$('#modal-bg').show();
$('#mce-success-response').hide();
|
Проблема как раз в том, что этот файл удалённый. Без возможности редактирования.
|
Цитата:
|
function show() {
if(document.getElementById('mce-success-response').offsetWidth || document.getElementById('mce-error-response').offsetWidth) document.getElementById('modal-bg').style.display = 'block';}
setTimeout(show, 1000)
И даже так не работает. Задержку пробовал разную, вплоть до 10 секунд. |
Franz,
где функция которая запустит таймер по клику |
Я так понял, что необходимо задержать функцию перед вызовом.
Я ориентировался на это http://learn.javascript.ru/settimeout-setinterval Разве я не прав? Где я ошибся? |
function show() {
setTimeout(abc, 1000)
}
function abc() { if(document.getElementById('mce-success-response').offsetWidth || document.getElementById('mce-error-response').offsetWidth) document.getElementById('modal-bg').style.display = 'block';};
|
И это работает.
Спасибо вам. |
| Часовой пояс GMT +3, время: 00:07. |