MessageBox

    
<!-- Example message for Cancel button -->
<div class="ui-message ui-message--danger" id="exampleMessage"><span class="message-title">Example message - Cancel</span></div>
<!-- Example message for OK button -->
<div class="ui-message ui-message--success" id="exampleMessage2"><span class="message-title">Example message - Done</span></div>

<!-- Wrapper for first message -->
<div class="ui-messageBox__wrapper">
  <div class="ui-messageBox fadeInDown">
    <div class="ui-messageBox__header"><span class="messageBox-title">Title</span><span class="button-close ui-messageBox-close"></span></div>
    <div class="ui-messageBox__content"><span>Message is here</span></div>
    <div class="ui-messageBox__footer">
      <div class="button button-light ui-messageBox-cancel">Cancel</div>
      <div class="button button-primary ui-messageBox-ok">OK</div>
    </div>
  </div>
</div>

<!-- Button for first message -->
<div class="button button-light ui-messageBox-show">Show confirm message</div>

<!-- Wrapper for second message -->
<div class="ui-messageBox__wrapper">
  <div class="ui-messageBox fadeInDown">
    <div class="ui-messageBox__header"><span class="messageBox-title">Another Title</span><span class="button-close ui-messageBox-close"></span></div>
    <div class="ui-messageBox__content"><span>Another Message is here</span></div>
    <div class="ui-messageBox__footer">
      <div class="button button-primary ui-messageBox-ok">OK</div>
    </div>
  </div>
</div>

<!-- Button for second message -->
<div class="button button-light ui-messageBox-show">Show standart message</div>


<script>
  // Start message
  uiMessage()

  // Example message for Cancel button
  function messageDialogItCancel(){
    showMessage('#exampleMessage')
  }

  // Example message for Ok button
  function messageDialogItOk(){
    showMessage('#exampleMessage2')
  }
</script>