Cacher is the code snippet organizer for pro developers

/* Contact form
-------------------------------------------------------------- */
$(function () {
  $('button[data-action="contact"]').on('click', function() {
    var el = $(this);
    UIkit.modal.edit('<i class="uk-icon-envelope"></i> ' + $(el).data('title'), '', '', function(message) {
      if(message == '') return false;
      $.ajax({
        type: 'post',
        url: '/api/contact',
        data: 'message=' + message
      });
    }, {Ok: $(el).data('send'), Cancel: $(el).data('cancel')});
  });
});

/* UIKit extensions
-------------------------------------------------------------- */
(function(UI) {
  "use strict";
  UI.modal.edit = function(title, text, value, onsubmit, options) {
    onsubmit = UI.$.isFunction(onsubmit) ? onsubmit : function(value){};
    options  = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:options}, options);

    var modal = UI.modal.dialog(([
      title ? '<div class="uk-modal-header"><h4>'+String(title)+'</h4></div>':'',
      '<div class="uk-modal-content uk-form">Please, write me a message</div>',
      '<div class="uk-margin-small-top uk-modal-content uk-form"><p><textarea name="body" class="uk-width-1-1"></textarea></p></div>',
      '<div class="uk-modal-footer uk-text-right"><button class="uk-button uk-button-link uk-modal-close">'+options.labels.Cancel+'</button><button class="uk-button uk-button-success js-modal-ok">'+options.labels.Ok+'</button></div>'
    ]).join(""), options),

    input = modal.element.find("textarea").val(value || '');
    modal.element.find(".js-modal-ok").on("click", function(){
      if (onsubmit(input.val())!==false){
        modal.hide();
      }
    });

    modal.on('show.uk.modal', function(){
      setTimeout(function(){
        input.focus();
      }, 50);
    });

    modal.show();
  };
})(UIkit);

.container.uk-text-center
  button.uk-button.uk-button-success(type='button', data-action='contact', data-title='Form title', data-send='Send this for me here', data-cancel='Cancel') Modal contact form

.container {
  padding:20px;
  background: #ffffff;
  min-height: 260px;
}
/* Modal
-------------------------------------------------------------- */
.uk-modal h4 {
  color: #2196f3;
  text-transform: uppercase;
  font-weight: 700;
}
.uk-modal textarea {
  min-height: 100px;
}
.uk-modal input {
  margin-left: 25px;
  width: 50%;
}
.uk-modal p i {
  color: #999;
  display: inline;
  font-size: 17px;
  margin-top: 5px;
  position: absolute;
}
.uk-modal .uk-button-link {
  color: #c0c0c0;
}