Скрыть 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"

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