Advanced Search

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

Expand | Embed | Plain Text

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.