Modal v1.0

modal.ejs

<!--Кнопки, вызывающие нужное окно-->
<button class="modal-but" data-modal="1">Открыть окно 1</button>
<button class="modal-but" data-modal="2">Открыть окно 2</button>

<!--Модальные окна-->
<!--Первое окно на странице используется для вывода ответа сервера-->
<div class="modal" data-modal="1">
  <p>Здесь будет ответ от сервера</p>
</div>

<div class="modal" data-modal="2">
  <p>Второе модальное окно</p>
  <button class="modal-but" data-modal="1">Открыть окно 1</button>
  <button class="modal-close">Закрыть окно</button>
</div>

<!--Подложки для затемнения-->
<div class="overlay"></div>

<!--Окно для небольшой информации-->
<div class="modal-info"></div>
<div class="modal-error"></div>

modal.js

// modals — модальные окна. Первое окно на странице - для вывода ответа сервера
// overlay — подложка для окон
// close — кнопка закрытия открытых окон
// одновременно показывается только одно окно
// info — модальное окно справа с выводом переданного сообщения

var Modal = (function() {
  return {

    init: function() {
      this.cache();
    },



    cache: function() {
      this.modals = document.getElementsByClassName("modal");
      this.buts = document.getElementsByClassName("modal-but");
      this.close = document.getElementsByClassName("modal-close");
      this.overlay = document.getElementsByClassName("overlay")[0];
      this.info = document.getElementsByClassName("modal-info")[0];
      this.error = document.getElementsByClassName("modal-error")[0];

      if (this.modals && this.buts && this.overlay) {
        this.bindEvents();
        this.sub();
      }

    },



    bindEvents: function() {
      var self = this;

      var i;
      for (i=0; i < this.buts.length; i++) {
        this.buts[i].addEventListener("click", function() {
          self.getModal(this);
        });
      }

      this.overlay.addEventListener("click", function() {
        self.hideAll();
      });

      if (this.close) {
        var l;
        for (l=0; l < this.close.length; l++) {
          this.close[l].addEventListener("click", function() {
            self.hideAll();
          });
        }
      }

      if (this.info) {
        this.info.addEventListener("click", function() {
          self.hide(self.info);
        });
      }
      if (this.error) {
        this.error.addEventListener("click", function() {
          self.hide(self.error);
        });
      }
    },



    sub: function() {
      var self = this;
      ev.on("modal:show", function(text) {
        self.changeInner(text);
      });

      ev.on("modal:show-info", function(text) {
        self.showInfo(text);
      });

      ev.on("modal:show-error", function(text) {
        self.showError(text);
      });
    },



    timer: function(modal) {
      var self = this;
      function sendModalToHide() {
        self.hide(modal);
      }
      this.timeout = setTimeout(sendModalToHide, 2000);
    },



    // Получаем нужное окно, попутно скрываем все остальные
    getModal: function(but) {
      var num = but.getAttribute("data-modal");

      var i;
      for (i=0; i < this.modals.length; i++) {
        this.modals[i].classList.remove("modal-active");

        var modalNum = this.modals[i].getAttribute("data-modal");
        if (modalNum === num) {
          this.show(this.modals[i]);
        }
      }
    },



    // Так как первое модальное окно на странице используется под показ сообщений, то используем его
    changeInner: function(text) {
      this.modals[0].innerHTML = text;
      this.show(this.modals[0], this.overlay[0]);
    },



    show: function(modal, overlay) {
      modal.classList.add("modal-active");
      this.overlay.classList.add("overlay-active");
    },



    hide: function(modal) {
      modal.classList.remove("modal-active");
      modal.classList.remove("modal-info-active");
    },



    hideAll: function() {
      var i;
      for (i=0; i < this.modals.length; i++) {
        this.modals[i].classList.remove("modal-active");
      }
      this.overlay.classList.remove("overlay-active");

      if (this.info) {
        this.info.classList.remove("modal-info-active");
      }
      if (this.error) {
        this.error.classList.remove("modal-info-active");
      }

      if (this.timeout) {
        clearTimeout(this.timeout);
      }
    },



    showInfo: function(text) {
      this.info.innerHTML = text;
      this.info.classList.add("modal-info-active");
      this.timer(this.info);
    },



    showError: function(text) {
      this.error.innerHTML = text;
      this.error.classList.add("modal-info-active");
      this.timer(this.error);
    }

  }
})();

modal.styl

.modal, .overlay
  opacity 0
  pointer-events none
  position fixed
  transition .3s

.modal
  background white
  left 50%
  padding 10px 15px
  top 40%
  transform translate(-50%, -50%)
  z-index 95
.modal-active
  opacity 1
  pointer-events auto
  top 50%
  z-index 96

.overlay
  background black
  cursor pointer
  height 100%
  left 0
  top 0
  width 100%
  z-index 93
.overlay-active
  opacity .8
  pointer-events auto
  z-index 94


.modal-info, .modal-error
  position fixed
  right -200px
  top 100px
  border 1px solid green
  border-radius 3px
  padding 10px 20px
  transition .2s
  opacity 0
  pointer-events none
  background white
  z-index 97
  &:hover
    cursor pointer
.modal-error
  top 145px
  border-color red

.modal-info-active
  right -2px
  opacity 1
  pointer-events auto
  z-index 98