fancybox prompt replacement

by ydelmas

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<a class="fancybox" href="#">test</a>
<div id="fancyPrompt" style="background-position: top right; background-repeat: no-repeat; padding-top: 10px; display: none;">
  <p class="title"></p>
  <textarea name="fancyVal"></textarea>
  <br/>
  <button type="button" class="ok">&#9166; OK</button>
  <button type="cancel">annuler</button>
</div>

JavaScript

$(document).ready(function() {
	console.log($('#fancyPrompt'));
  $(".fancybox").on("click", function(e) {
    e.preventDefault();
    fancyPrompt("Saisissez un texte", true, 'val. init.', function(resp) {
      alert(resp);
    });
  });
});

function fancyPrompt(title, modal, initVal, callback) {
  var ret;
  var fp = $('#fancyPrompt');
  var ta = fp.find('[name="fancyVal"]');
  $.fancybox(fp, {
    modal: modal,
    beforeShow: function() {
      fp.find('.title').html(title);
      ta.val(initVal);
    },
    afterShow: function() {
      ta.on('keydown', function(e) {
        console.log(e.keyCode);
      	if (e.keyCode == 13) {
        	ret = ta.val();
          $.fancybox.close();
          return(false);
        } else if (e.keyCode == 27) {
          ret = null;
          $.fancybox.close();
        }
      });
      fp.find('button').on('click', function(e) {
        if ($(e.target).is('.ok')) { ret = ta.val(); }
        else { ret = null; }
        $.fancybox.close();
      });
      ta.focus();
      ta[0].select();
    },
    afterClose: function() {
      fp.off('keyup');
      callback.call(this, ret);
    }
  });
}