JSFiddle - React, Tailwind, and code Playground

by blog Canonium

HTML

<!-- Dialog -->
<dialog class="modal" id="myWindowOne" role="dialog">
  <form method="dialog">
    <header class="modal-header">
      <h1>Dialog</h1>
    </header>
    <main class="modal-main">
      <p>Luke, I Am Your Father!</p>
    </main>
    <footer class="modal-footer">
      <button type="submit" class="btn btn-close" data-action="modal-close" value="no">No</button>
      <button type="submit" class="btn btn-accept" data-action="modal-accept" value="yes" autofocus>Yes</button>
    </footer>
  </form>
</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.on("close", function(even) {
    // Для примера, отображаем возвращённые данные, используя alert
    var value = this.returnValue === 'yes' ? "Yes!" : "Noooooooooooooooooooooooooooooooo!";
    alert(value);
  });
});