title: Return a value from custom (modal) alert box
body: <p>Please find the below code...</p>
  
  <pre><code>var res = confirm("Are you Sure?");
  alert(res);
  </code></pre>
  
  <p>In the above confirm box When you click the 'OK', you will get the returned value of 'true', and 'false' for clicking the 'CANCEL'. How do we return a value (0 or 1) from jquery custom modal box plugin, like above confirm box?</p>
  
  <p>Find the following fiddle for sample and plug-in script in <a href="http://jsfiddle.net/yesvin/N2Qu7/" rel="nofollow">http://jsfiddle.net/yesvin/N2Qu7/</a></p>
  
  <p><strong>Complete HTML Code</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
          &lt;title&gt;Custom Modal&lt;/title&gt; 
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
          &lt;meta http-equiv=”Content-Type” content=”text/html; charset=utf-8&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  
          &lt;script src="http://code.jquery.com/jquery-1.8.0.min.js"&gt;&lt;/script&gt;      
          &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  
          &lt;style&gt;
              .btnCls, .btnCls:hover {
                  border-radius: 10px;
                  background: #cff73d; 
                  background: -moz-linear-gradient(top,  #f0ffc3 0%, #cff73d 100%); 
                  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0ffc3), color-stop(100%,#cff73d)); 
                  background: -webkit-linear-gradient(top,  #f0ffc3 0%,#cff73d 100%); 
                  background: -o-linear-gradient(top,  #f0ffc3 0%,#cff73d 100%); 
                  background: -ms-linear-gradient(top,  #f0ffc3 0%,#cff73d 100%); 
                  background: linear-gradient(to bottom,  #f0ffc3 0%,#cff73d 100%); 
                  filter: progid :DXImageTransform.Microsoft.gradient( startColorstr='#f0ffc3', endColorstr='#cff73d',GradientType=0 ); 
                  border: 1px solid #364b4d;
                  box-shadow: 0px 3px 8px #536803 !important;
              }
  
              #modOverlay {
                  position:fixed; 
                  top:0;
                  left:0;
                  width:100%;
                  height:100%;
                  background:#000;
                  opacity:0.7;
                  filter:alpha(opacity=70);
                  z-index:1000;
              }
  
              #modalWin {
                  position:absolute;              
                  background:#D8DBB6;             
                  border:none;
                  border-radius:0 0 5px 5px;
                  padding:15px;
                  z-index:1000;
              }
  
              #modContent {
                  border-radius:8px;
                  /*background:#fff;*/
                  padding: 10px 10px 10px 0;
                  height:auto;
                  width:220px;
                  font-family: Arial;
                  font-size: 12px;                
              }
  
              #modContent h3{
                   background: none repeat scroll 0 0 #69820B;
                  border-radius: 5px 5px 0 0;
                  color: #FFFFFF;
                  font-size: 16px;
                  left: 0;
                  margin: 0;
                  padding: 10px 5px 10px 15px;
                  position: absolute;
                  top: -36px;
                  width: 240px;
  
              }
  
              #modContent p{
                  margin: 0;
                  padding: 0 0 0 0px;
              }
  
              button {
                  border:solid 1px #565656;
                  margin: 8px 7px 0 0;
                  cursor:pointer;
                  font-size:12px;
                  padding:5px;
                  border:none;
                  border-radius:5px!important;    
              }
  
              #clsBtn {               
                  position:absolute;
                  top:-40px;
                  right:-3px;
              }
  
              .icon{
                   display: block;
                  height: 24px;
                  left: 15px;
                  position: absolute;
                  text-indent: -9999px;
                  top: 20px;
                  width: 24px;
              }
          &lt;/style&gt; 
  
          &lt;script type="text/javascript"&gt;
              var customModal = (function(){
                  var  
                  method = {},
                  returnValue,
                  $overlay,
                  $content,
                  $title,
                  $message,
                  $close, 
  
                  $buttonMode,
                  $ok,    
                  $cancel,
  
                  $okFunc,
                  $cancelFunc,
  
                  $icon,
                  $status,        
  
                  $modal;         
  
                  $overlay = $('&lt;div id="modOverlay"&gt;&lt;/div&gt;');
                  $modal = $('&lt;div id="modalWin" class="ui-body-c"&gt;&lt;/div&gt;');
                  $title = $('&lt;h3&gt;&lt;/h3&gt;')
                  $message = $('&lt;p&gt;&lt;/p&gt;') 
                  $content = $('&lt;div id="modContent"&gt;&lt;/div&gt;');
                  $close = $('&lt;button id="clsBtn" class="btnCls"&gt;X&lt;/button&gt;');
                  $icon = $('&lt;div class="icon"&gt;&lt;/div&gt;')
  
                  $ok = $('&lt;button id="ok" class="btnCls"&gt;OK&lt;/button&gt;')
                  $cancel = $('&lt;button id="cancel" class="btnCls"&gt;Cancel&lt;/button&gt;')
  
                  $content.append($title, $message, $icon);   
  
                  $modal.hide();
                  $overlay.hide();
  
                  method.center = function () {
                      var top, left;
  
                      top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                      left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
  
                      $modal.css({
                          top:top + $(window).scrollTop(), 
                          left:left + $(window).scrollLeft()
                      });
                  };
  
                  method.open = function (settings) {
                      $title.empty().append(settings.title);
                      $message.empty().append(settings.message);
                      $status = settings.status;
                      retValue = settings.returnValue;
  
                      switch(settings.status)
                      {
                          case 'Warning':
                          $icon.removeClass('infoIcn');
                          $icon.removeClass('succeesIcn');
                          $icon.removeClass('errorIcn');
                          $icon.addClass('waringIcn');            
                          break;
                          case 'Success':
                          $icon.removeClass('infoIcn');           
                          $icon.removeClass('errorIcn');
                          $icon.removeClass('waringIcn');
                          $icon.addClass('succeesIcn');
                          break;
                          case 'Error':
                          $icon.removeClass('infoIcn');
                          $icon.removeClass('succeesIcn');            
                          $icon.removeClass('waringIcn');
                          $icon.addClass('errorIcn');
                          break;
                          case 'Info':
                          $icon.removeClass('succeesIcn');            
                          $icon.removeClass('waringIcn');
                          $icon.removeClass('errorIcn');
                          $icon.addClass('infoIcn');
                          break;  
                      }   
  
                      switch(settings.buttonMode)
                      {
                      case 'ok':        
                        $modal.append($content, $close, $ok);                                       
                        break;
                      case 'cancel':        
                        $modal.append($content, $close, $cancel);   
                        break;
                      case 'both':
                        $modal.append($content, $close, $ok, $cancel);         
                        break; 
                      default:
                        $modal.append($content, $close, $ok, $cancel);          
                      }       
  
                      $modal.css({
                          width: settings.width || 'auto', 
                          height: settings.height || 'auto'           
                      });
  
                      method.center();
                      $modal.show();
                      $overlay.show();
                  };
  
                  method.close = function () {
                      $modal.hide();
                      $overlay.hide();
                      $title.empty();
                      $message.empty();       
                  };
  
                  method.retrnFunc = function (i) {
                      retValue = i;       
                      alert(retValue);            
                  };  
  
                  $close.click(function(e){
                      e.preventDefault();
                      method.close();
                  });
  
                  $ok.click(function(e){          
                      e.preventDefault(); 
                      method.retrnFunc(0);                
                  });
  
                  $cancel.click(function(e){          
                      e.preventDefault();     
                      method.retrnFunc(1);                        
                  });
  
                  $(document).ready(function(){
                      $('body').append($overlay, $modal);                     
                  });
  
                  return method;
              }());
  
              $(function (){              
                  $("#btn").click(function (){
                      var result = customModal.open({title: "Confirmation", message:"Are you sure?",buttonMode:"both"});
                      alert(result);
                  });
  
                  if (result){
                      //do something if true
                  }
                  else {
                      //do something if false
                  }
  
              });             
  
          &lt;/script&gt;       
      &lt;/head&gt;
      &lt;body&gt;      
          &lt;button id="btn"&gt;Open Confirm?&lt;/button&gt;​
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Advice me how do we return a value (0 or 1) from jquery custom modal box plugin, like above confirm box?</p>
  
  <p>Thanks in advance....!</p>