Простое модальное окно на jQuery

Простой пример реализации модального окна, которое должно закрываться по клику вне области окна и быть открытым при кликах в нем


Очень много таких вопросах в тостере находил, в частности тут, поэтому решил написать даже заметку для этой популярной задачки :)

HTML:

<div id="wrapper">
  <div class="cover"></div>
  <div class="modal">
    <div class="content">
      <p>THIS IS CONTENT</p>
      <form onsubmit="return false">
        <input type="text" placeholder="test">
        <input type="submit" />
      </form>
    </div>
  </div>

  <div class="cnt">
    <button class="open-modal-btn">OPEN MODAL</button>
  </div>
</div>

CSS:

.cnt {
  text-align: center;
}

.cover {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 100;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: scroll;
  padding: 20px;
  z-index: 200;
}

.content {
  display: none;
  width: 100%;
  min-width: 200px;
  width: 100%;
  position: relative;
  background-color: #FAFAFA;
  z-index: 300;
  padding: 50px 0;
}

.open-modal-btn {
  cursor: pointer;
}

JS:

// open modal
var wrap = $('#wrapper'),
     btn = $('.open-modal-btn'),
     modal = $('.cover, .modal, .content');

btn.on('click', function() {
  modal.fadeIn();
});

// close modal
$('.modal').click(function() {
  wrap.on('click', function(event) {
    var select = $('.content');
    if ($(event.target).closest(select).length)
      return;
    modal.fadeOut();
    wrap.unbind('click');
  });
});


Похожие заметки:

Найти сумму произведений всех простых чисел

Найдите сумму произведений всех простых чисел, меньших 200, на их порядковые номера, считая, что первым простым числом является 2

Открыть здесь

Прелоадер до загрузки страницы

Показываем прелоадер на страницах сайта, до его полной загрузки, реализация плавного исчезновения гифки и появление контента

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии


3
avatar

kurven сказал 05-07-2017 в 14:46


всё же, как добавить крестик или кнопку "закрыть окно"?


avatar

Админ

Роман Жариков сказал 05-07-2017 в 15:34


Отредактировал код. Ссылка: https://jsfiddle.net/pgqytmw4/15/

Полный код скрипта теперь выглядит так:

// open modal
var wrap = $('#wrapper'),
  btn = $('.open-modal-btn'),
  modal = $('.cover, .modal, .content'),
  close = $('#close_modal'),
  state = {
    "close": 0
  };

btn.on('click', function() {
  modal.fadeIn();
});

// close modal
$('.modal').click(function() {
  wrap.on('click', function(event) {
    var select = $('.content');
    if (!$(event.target).closest(select).length &amp;&amp; !state.close)
      modal.fadeOut();
    state.close = 0;
    $(this).unbind('click');
  });
});

close.on('click', function() {
  modal.fadeOut();
  state.close = 1;
});

Мы добавили в глобальную область видимости объект состояние (state). Теперь закрывается по кнопке.


avatar

kurven сказал 05-07-2017 в 18:09

   В ответ на комментарии автора Роман Жариков

Супер! Огромное спасибо!