JSFiddle - React, Tailwind, and code Playground

by katiabaer

HTML

<script src="//cdn.jsdelivr.net/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<body>
    <input id='message' value='Hello World!'></input>
    <input id='header' value='This is my modal alert'></input>
    <input class="button" id='show' type='button' value='Show this'></input>
    <div id="alertBox" class="alert-messagebox">
         <h2 class="alert-header"></h2>

        <div class="alert-message"></div>
        <div class="button-area">
            <button class="button modal-close-button">Click OK</button>
        </div>
    </div>
</body>

CSS

.alert-messagebox > div.button-area {
    position: absolute;
    bottom: 10px;
    width: 100%;
    margin-left:177px;
}
.alert-messagebox button {
    cursor: pointer;
    .centered;
}
.alert-messagebox {
    display: none;
    width: 420px;
    height:150px;

    background-color: white;
    border: 1px double silver;
}
.alert-header {
    font: bold 20px Arial, Helvetica;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid #aaa;
    background-color: #d8d8d8;
    margin-top: 0px;
    text-align:center;
}
.alert-message {
    font: 14px Arial, Helvetica;
    padding: 10px;
    text-align:center;
}

JavaScript

showAlert = function (msg, header, callback) {
      var mydiv = $("<div id='mydiv'> </div>");
      mydiv.alertBox({
          message: msg,
          header: header,
          callback: callback
      });

  },

  $('#show').click(function () {
      var m = $('#message').val();
      var h = $('#header').val();
      var callback = function () {
          alert("I can do anything here");
      }
      showAlert(m, h, callback);

  });

  $.widget("MY.alertBox", {
      options: {
          message: "",
          header: "",
          callback: ''
      },

      _create: function () {
          var self = this;
          self.callback = self.options.callback;

          self.container = $(".alert-messagebox");
          var header = self.container.find(".alert-header");
          header.html(self.options.header);

          var message = self.container.find(".alert-message");
          message.html(self.options.message);

          var closeButton = self.container.find("button.modal-close-button");
          closeButton.click(function () {
              self.close();
          });

          self.show();
      },

      show: function () {
          var self = this;
          self.container.modal({
              maxWidth: 500
          });
      },

      close: function () {

          if (this.callback != null) {
              this.callback();
              $.modal.close();
              return;
          }
          $.modal.close();

      },

      destroy: function () {
          $.Widget.prototype.destroy.call(this);
      }

  });