Скрыть 2 div'a после клика вне первого.

[Franz]

Собственно, сабж.

Текущий код умеет:
При нажатии на кнопку ОК (#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,
как можно нажать на ок если кнопка в невидимом блоке

[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';
  	  }
  	}

[Franz]

Спасибо за ответ.

Простите, моё изучение JS началось час назад и поэтому вопрос:
это дополняющий код или заменяющий?

Если заменяющий, то после его вставки #modal-bg перестал появляться.

[рони]

Franz,
строка 9 добавьте вашу кнопку в число запретных

if (target.id == 'mce-responses' || target.id == 'mc-embedded-subscribe') {

[Franz]

Всё работает, супер. Спасибо.

Теперь буду думать как всё это оптимизировать.

[Franz]

Снова здравствуйте.
Выяснилось, что не такая реализация не работает под android. Окно открывается, но закрыть его уже не выходит. Какие могут быть причины?

UPD: Как можно поменять скрипт так, чтобы modal-bg открывался только в случае открытия mce-success-response\error?
Потому что сейчас может случиться так: пользователь промахнулся\случайно нажал на кнопку ОК - попап не вылез, а затенение появилось.

[рони]

Franz,
может там
target = event.targetTouches[0]
a "click"="touchstart"

[Franz]

Пардон, но "там" это где?
А настройках браузера? Или где-то в скрипте?