Как создать простое модальное окно на jQuery

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример модального окна</title>
  <link rel="stylesheet" href="modal.css">
</head>
<body>
  <main>
    <h1>Информация о доставке</h1>
    <button type="button" class="paulund_modal">
      Открыть сообщение
    </button>
  </main>
</body>
</html>

(function ($) {
  $.fn.paulund_modal_box = function (prop) {
    var options = $.extend({
      height: 250,
      width: 500,
      title: 'Информация',
      description: 'Заказ готов к отправке.'
    }, prop);

    return this.off('click.paulundModal')
      .on('click.paulundModal', function (e) {
        e.preventDefault();
        // Здесь появится создание окна.
      });
  };
})(jQuery);

.paulund_block_page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}

body.paulund_modal_open {
  overflow: hidden;
}

.paulund_modal_box {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #222;
  box-shadow: 0 2px 7px #292929;
}

.paulund_modal_title {
  margin: 0 40px 16px 0;
  font-size: 24px;
}

.paulund_modal_description {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.paulund_modal_close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 4px;
  background: #eee;
  color: #222;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.paulund_modal_close:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

(function ($) {
  var active = false;
  var counter = 0;

  $.fn.paulund_modal_box = function (prop) {
    var options = $.extend({
      height: 250,
      width: 500,
      title: 'Информация',
      description: 'Заказ готов к отправке.'
    }, prop);

    return this.off('click.paulundModal')
      .on('click.paulundModal', function (e) {
        e.preventDefault();
        if (active) return;
        active = true;

        var opener = this;
        var closing = false;
        var body = document.body;
        var oldOverflow = body.style.overflow;
        var background = [];
        var titleId = 'paulund-modal-title-' + (++counter);
        var duration = window.matchMedia(
          '(prefers-reduced-motion: reduce)'
        ).matches ? 0 : 120;

        var $overlay = $('<div>', {
          'class': 'paulund_block_page'
        });
        var $dialog = $('<div>', {
          'class': 'paulund_modal_box',
          role: 'dialog',
          'aria-modal': 'true',
          'aria-labelledby': titleId,
          tabindex: '-1'
        }).css({
          width: options.width,
          height: options.height
        });
        var $close = $('<button>', {
          'class': 'paulund_modal_close',
          type: 'button',
          'aria-label': 'Закрыть окно'
        }).text('×');
        var $title = $('<h2>', {
          'class': 'paulund_modal_title',
          id: titleId
        }).text(options.title);
        var $description = $('<p>', {
          'class': 'paulund_modal_description'
        }).text(options.description);

        $dialog.append($close, $title, $description);
        $overlay.append($dialog).appendTo(body);

        Array.from(body.children).forEach(function (element) {
          if (element === $overlay[0]) return;
          background.push({
            element: element,
            inert: element.inert
          });
          element.inert = true;
        });
        body.style.overflow = 'hidden';

        function closeModal() {
          if (closing) return;
          closing = true;

          $overlay.stop(true).fadeOut(duration, function () {
            $(document).off('.paulundModalOpen');
            $overlay.remove();
            background.forEach(function (item) {
              item.element.inert = item.inert;
            });
            body.style.overflow = oldOverflow;
            active = false;
            if (opener.isConnected) opener.focus();
          });
        }

        $close.on('click.paulundModalClose', closeModal);
        $overlay.on('click.paulundModalOverlay', function (event) {
          if (event.target === $overlay[0]) closeModal();
        });

        $(document).on('keydown.paulundModalOpen', function (event) {
          if (event.key === 'Escape') {
            event.preventDefault();
            closeModal();
          }
          if (event.key === 'Tab') {
            event.preventDefault();
            $close[0].focus();
          }
        });

        $(document).on('focusin.paulundModalOpen', function (event) {
          if (!$dialog[0].contains(event.target)) {
            $close[0].focus();
          }
        });

        $overlay.hide().fadeIn(duration);
        $close[0].focus();
      });
  };
})(jQuery);

<script src="jquery.js"></script>
<script src="jquery.paulund_modal_box.js"></script>
<script>
  $(function () {
    $('.paulund_modal').paulund_modal_box();
  });
</script>

<script>
  $(function () {
    $('.paulund_modal').paulund_modal_box({
      title: 'Доставка заказа',
      description: 'Курьер свяжется с вами перед выездом. Подготовьте номер заказа.',
      height: 320,
      width: 600
    });
  });
</script>