jquery - Return a value from custom (modal) alert box -
please find below code...
var res = confirm("are sure?"); alert(res); in above confirm box when click 'ok', returned value of 'true', , 'false' clicking 'cancel'. how return value (0 or 1) jquery custom modal box plugin, above confirm box?
find following fiddle sample , plug-in script in http://jsfiddle.net/yesvin/n2qu7/
complete html code
<!doctype html> <html> <head> <title>custom modal</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv=”content-type” content=”text/html; charset=utf-8> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <style> .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; } </style> <script type="text/javascript"> var custommodal = (function(){ var method = {}, returnvalue, $overlay, $content, $title, $message, $close, $buttonmode, $ok, $cancel, $okfunc, $cancelfunc, $icon, $status, $modal; $overlay = $('<div id="modoverlay"></div>'); $modal = $('<div id="modalwin" class="ui-body-c"></div>'); $title = $('<h3></h3>') $message = $('<p></p>') $content = $('<div id="modcontent"></div>'); $close = $('<button id="clsbtn" class="btncls">x</button>'); $icon = $('<div class="icon"></div>') $ok = $('<button id="ok" class="btncls">ok</button>') $cancel = $('<button id="cancel" class="btncls">cancel</button>') $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 sure?",buttonmode:"both"}); alert(result); }); if (result){ //do if true } else { //do if false } }); </script> </head> <body> <button id="btn">open confirm?</button> </body> </html> advice me how return value (0 or 1) jquery custom modal box plugin, above confirm box?
thanks in advance....!
you can't stop javascript thread way confirm does, don't need to:
make 1 of settings pass open callback function, , call function argument telling button pressed (or whatever else needs tell it).
in code, looks reuse 1 set of variables modal, you'd add callback big var , assign settings object in open. in close, call function , clear variable.
so in big var:
// ... $status, $modal, $callback; // <== new bit and in open:
// ... retvalue = settings.returnvalue; $callback = settings.callback; // <== new bit and in retrnfunc:
if ($callback) { try { $callback(i); } catch (e) { } $callback = undefined; } then use this:
custommodal.open({ // ...other settings... callback: function(i) { alert(i); } });
Comments
Post a Comment