Как затемнить фон за тегом Dialog?

Question

[Renat871]

Всем привет. Мне нужна помощь. У меня сверстана форма

<dialog class="fadeInDown wow" id="dialog_log">
        <button id="closeDialog_log" class="none_back2"></button>
          <div id="wrapper">
            <b>Login</b>
            <form id="signin" method="" action="" autocomplete="off">
              <input type="text" id="user" name="user" placeholder="username" required />
              <input type="password" id="pass" name="pass" placeholder="password" required />
              <button type="submit">&#xf0da;</button>
              <a href="#"><p>Забули</a> свій пароль?</p>
            </form>
          </div>
      </dialog>

куча CSS но это не интересно.

дальше JS

var dialog = document.querySelector('#dialog_log');
        document.querySelector('#openDialog_log').onclick = function() {
         dialog_log.show(); 
        }
        document.querySelector('#closeDialog_log').onclick = function() {
         dialog_log.close();
        }

и надо сделать так что б когда показивается это окно то фон (весь body) становился темнее.

Ну и позможности подскажите как сделать что б при нажатии на любую точку фона этот dialog закривался

Comments

[Ankhena]

и надо сделать так что б когда показивается это окно то фон (весь body) становился темнее.

Допишите в функцию, что нужно не только show запустить, но и затемнить body.
Само затемнение можно делать кучей разных способов. Например, затемнять сам dialog, растянув его на всё окно. А форму разместив по центру.
Либо сделать еще одну обертку.
Либо псевдо.
Либо огромной тенью.
Либо фильтрами на body.
Либо еще что-нибудь...

Ну и позможности подскажите как сделать что б при нажатии на любую точку фона этот dialog закривался

google -> js закрытие окна по клику мимо окна
или поиском по этому сервису, т.к. это частый вопрос, раз в месяц точно.

https://jsfiddle.net/7rpoamye/