Javascript alert and confirm dialog the FancyBox way


/ Published in: JavaScript
Save to your folder(s)

The the fancybox lightbox to create replacement for the alert and confirm dialog


Copy this code and paste it in your HTML
  1. function fancyAlert(msg) {
  2. jQuery.fancybox({
  3. 'modal' : true,
  4. 'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"
  5. });
  6. }
  7.  
  8. function fancyConfirm(msg,callback) {
  9. var ret;
  10. jQuery.fancybox({
  11. modal : true,
  12. content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
  13. onComplete : function() {
  14. jQuery("#fancyConfirm_cancel").click(function() {
  15. ret = false;
  16. jQuery.fancybox.close();
  17. })
  18. jQuery("#fancyConfirm_ok").click(function() {
  19. ret = true;
  20. jQuery.fancybox.close();
  21. })
  22. },
  23. onClosed : function() {
  24. callback.call(this,ret);
  25. }
  26. });
  27. }
  28.  
  29. function fancyConfirm_text() {
  30. fancyConfirm("Ceci est un test", function(ret) {
  31. alert(ret)
  32. })
  33. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.