JSFiddle - React, Tailwind, and code Playground

by blog Canonium

HTML

<!-- Dialog -->
<dialog class="modal" id="myWindowOne" role="dialog">
  <header class="modal-header">
    <h1>Dialog</h1>
  </header>
  <main class="modal-main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, neque quasi. Distinctio sapiente modi, sequi libero unde blanditiis impedit sit dolorem vero deleniti facilis a debitis voluptatum. Laboriosam, nostrum sint!</p>
    <label>
        Value:
        <input type="number" name="value" placeholder="Enter value">
    </label>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptas incidunt non porro architecto soluta facere minima expedita maiores minus accusamus fugit quasi distinctio consequuntur quam! Vitae numquam consequuntur suscipit.</p>
  </main>
  <footer class="modal-footer">
    <button class="btn btn-close" data-action="modal-close">Close</button>
    <button class="btn btn-accept" data-action="modal-accept">Accept</button>
  </footer>
</dialog>

<!-- Show dialog -->
<button class="btn" data-tools="dialog" data-target="#myWindowOne">Show dialog</button>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}
.modal {
  padding: 0;
  background-color: #fff;
  border: 0;
  max-width: 600px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.modal::backdrop {
  background-color: #2575ed;
  opacity: .5;
}
.modal-header {
  padding: 30px 40px 5px 40px;
}
.modal-header h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
}
.modal-main {
  padding: 30px 40px 50px 40px;
}
.modal-main p {
  margin-top: 0;
}
.modal-main label {
  display: block;
}
.modal-main input {
  margin-top: 5px;
  margin-bottom: 15px;
  display: block;
  padding: 5px 10px;
  outline: 0;
  width: 100%;
}
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.modal-footer:after {
  clear: both;
}
.modal-footer > .btn {
  border: 0;
  outline: 0;
  padding: 15px;
  cursor: pointer;
  width: 50%;
  float: left;
}
.modal-footer > .btn-close {
  background-color: #e0e3e5;
}
.modal-footer > .btn-close:hover {
  background-color: #b3b6b7;
}
.modal-footer > .btn-accept {
  background-color: #2575ed;
  color: #fff;
}
.modal-footer > .btn-accept:hover {
  background-color: #1a52a5;
}

JavaScript

// Получаем массив всех кнопок с атрибутом [data-tools = dialog]
var dialogs = $('button[data-tools="dialog"]');

// Перебираем в цикле каждый элемент
$.each(dialogs, function(i) {
  var dialog = $(dialogs[i]);

  // Извлекаем ID вызываемого диалогового окна [data-target = ID]
  var target = $(dialog.data('target'));

  // Обрабатываем событие нажатие кнопки
  dialog.on("click", function(even) {
    // Отображаем окно ([0] здесь применяется для вызова нативного метода show)
    target[0].show();
  });

  // Обрабатываем нажатие кнопки закрытия
  target.find('button[data-action="modal-close"]').on("click", function(even) {
    // Получаем введённое значение
    var value = $('input[name="value"]').val();

    // Закрываем окно ([0] здесь применяется для вызова нативного метода close)
    // Возврат значения из диалога
    target[0].close(value);
  });

  // Обрабатываем событие закрытия модального окна
  target.on("close", function(even) {
    // Для примера, отображаем возвращённые данные, используя alert
    alert(this.returnValue);
  });
});