lankymart/README.md

## README.md

      
    Raw
  

              README.md
            
          
    FancyBox2 Confirm Dialog Box

Single callback approach to implementing a Confirmation Dialog Box using FancyBox2
Usage

fancyconfirm("Do you wish to continue?"
  , { modal: true }
  , function(resp) { 
    alert("You clicked " + resp); 
  }
);
Example


Working Demo (jsFiddle)

References


http://stackoverflow.com/a/19659981/692942


## fancyconfirm.js
function fancyconfirm(msg, options, callback) {
  $.fancybox("#confirm", {
      modal: options.modal,
      beforeShow: function () {
          this.content.prepend("<p class=\"title\"></p>");
          $(".title").html(msg);

          if (options.buttons == null) {
              options.buttons = [{
                  clsName: "yes",
                  title: "Yes",
                  value: true
              }, {
                  clsName: "no",
                  title: "No",
                  value: false
              }];
          }

          for (i = 0; i < options.buttons.length; i++) {
              this.content.append($("<input>", {
                  type: "button",
                  class: "confirm " + options.buttons[i].class,
                  value: options.buttons[i].title
              }).data("index", i).css("margin-left", ((i > 0) ? "10px" : "")));
          }
          $(this.content).css("text-align", "center");
      },
      afterShow: function () {
          $(".confirm").on("click", function (event) {
              ret = options.buttons[$(event.target).data("index")].value;
              $.fancybox.close();
          });
      },
      afterClose: function () {
          this.content.html("");
          callback.call(this, ret);
      }
  });
}

## index.htm
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>FancyBox2 - Confirm Box Demo</title>
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">

    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  </head>
  <body>
    <a class="fancybox" href="#">click here</a>

    <div id="confirm"></div>

    <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
    <script type="text/javascript" src="fancyconfirm.js"></script>
    <script type="text/javascript">
    //<![CDATA[
      $(document).ready(function () {
          $(".fancybox").on("click", function (e) {
              e.preventDefault();
              fancyconfirm("Do you wish to continue?", {
                  /*
                  Define your buttons here, can handle multiple buttons
                  with custom title and values
                  */
                  buttons: [{
                      class: "yes",
                      type: "button",
                      title: "Yes",
                      value: "yes"
                  }, {
                      class: "no",
                      type: "button",
                      title: "No",
                      value: "no"
                  }, {
                      class: "maybe",
                      type: "button",
                      title: "Maybe?",
                      value: "maybe"
                  }],
                  modal: true
              },

              function (resp) {
                  alert("You clicked " + resp);
              });
          });
      });
    //]]>
    </script>
  </body>
</html>
	function fancyconfirm(msg, options, callback) {
	$.fancybox("#confirm", {
	modal: options.modal,
	beforeShow: function () {
	this.content.prepend("<p class=\"title\"></p>");
	$(".title").html(msg);

	if (options.buttons == null) {
	options.buttons = [{
	clsName: "yes",
	title: "Yes",
	value: true
	}, {
	clsName: "no",
	title: "No",
	value: false
	}];
	}

	for (i = 0; i < options.buttons.length; i++) {
	this.content.append($("<input>", {
	type: "button",
	class: "confirm " + options.buttons[i].class,
	value: options.buttons[i].title
	}).data("index", i).css("margin-left", ((i > 0) ? "10px" : "")));
	}
	$(this.content).css("text-align", "center");
	},
	afterShow: function () {
	$(".confirm").on("click", function (event) {
	ret = options.buttons[$(event.target).data("index")].value;
	$.fancybox.close();
	});
	},
	afterClose: function () {
	this.content.html("");
	callback.call(this, ret);
	}
	});
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>FancyBox2 - Confirm Box Demo</title>
	<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">

	<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
	</head>
	<body>
	<a class="fancybox" href="#">click here</a>

	<div id="confirm"></div>

	<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
	<script type="text/javascript" src="fancyconfirm.js"></script>
	<script type="text/javascript">
	//<![CDATA[
	$(document).ready(function () {
	$(".fancybox").on("click", function (e) {
	e.preventDefault();
	fancyconfirm("Do you wish to continue?", {
	/*
	Define your buttons here, can handle multiple buttons
	with custom title and values
	*/
	buttons: [{
	class: "yes",
	type: "button",
	title: "Yes",
	value: "yes"
	}, {
	class: "no",
	type: "button",
	title: "No",
	value: "no"
	}, {
	class: "maybe",
	type: "button",
	title: "Maybe?",
	value: "maybe"
	}],
	modal: true
	},

	function (resp) {
	alert("You clicked " + resp);
	});
	});
	});
	//]]>
	</script>
	</body>
	</html>