從自定義（模式）警告框

請找到下面的代碼返回一個值...從自定義（模式）警告框

var res = confirm("Are you Sure?"); 
alert(res);

在上面的確認框當您單擊「確定」，你會得到「真返回值'，'false'用於點擊'取消'。我們如何從jquery自定義模態框插件返回值（0或1），如上面的確認框？

查找以下搗鼓樣品和插件腳本http://jsfiddle.net/yesvin/N2Qu7/

完整的HTML代碼

<!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 you sure?",buttonMode:"both"}); 
        alert(result); 
       }); 

       if (result){ 
        //do something if true 
       } 
       else { 
        //do something if false 
       } 

      });    

     </script>  
    </head> 
    <body>  
     <button id="btn">Open Confirm?</button> 
    </body> 
</html>

建議我，我們如何返回一個值（0或1）jQuery的定製模式盒子插件，如上面確認框？

在此先感謝....！

來源

2013-05-14 Yesvinkumar

總是把**所有**的相關代碼和標記**放在問題本身**中，不要只是鏈接（甚至不要jsFiddle）。當然，在做這件事之前，你要確保你發佈的是[**最低必要**]（http://sscce.org）。 http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-forputing-code-in-the-question – 2013-05-14 13:16:58

所有相關的代碼已被放置... – Yesvinkumar 2013-05-14 13:24:16

@ Yesvinkumar：關於[**最低必要**]（http://sscce.org/）部分... – 2013-05-14 13:27:56

你不能停止的JavaScript線程的方式confirm，但你並不需要：

使你進入open一個回調函數的一個設置，然後調用函數帶有一個參數告訴它按下了什麼按鈕（或者其他需要告訴的按鈕）。

在代碼中，它看起來像你重複使用一組變量的模式，所以你要補充callback到你的大var，並分配給它設置在open對象。然後在close中調用該函數並清除該變量。

所以在大var：

// ... 
$status, 
$modal, 
$callback; // <== The new bit

而且在open：

// ... 
retValue = settings.returnValue; 
$callback = settings.callback; // <== The new bit

而且在retrnFunc：

if ($callback) { 
    try { 
     $callback(i); 
    } 
    catch (e) { 
    } 
    $callback = undefined; 
}

然後你使用這樣的：

customModal.open({ 
    // ...other settings... 
    callback: function(i) { 
     alert(i); 
    } 
});

來源

2013-05-14 13:38:48

非常感謝！這也工作正常，因爲我預期... – Yesvinkumar 2013-05-14 16:56:24

-1

簡單地說，使用三級運營商：

var res = (confirm("Are you Sure?"))? 1:0; 
alert(res);

來源

2013-05-14 13:19:35 hjpotter92

OP想要使用自定義模態框插件，因爲我可以讀取 – 2013-05-14 13:22:43

@roasted模式已經返回「0或1」 – hjpotter92 2013-05-14 13:26:32

正如你已經注意到，您的自定義模式不會以同樣的方式，默認confirm彈出不阻塞。所以，你不能只是讓你的代碼立即返回結果。一種選擇是將回調函數作爲參數傳遞給open。然後，你可以這樣調用它：

customModal.open(
    { 
     title: "Confirmation", 
     message:"Are you sure?", 
     buttonMode:"both" 
    }, 
    function(result){ 
     alert("RESULT FROM CALLBACK: " + result); 
    } 
);

或者，您也可以在選項中包括的對象傳遞，而不是作爲一個單獨的參數回調。

然後在你的open功能，只需用通過回調取代默認的結果函數：

method.open = function (settings, callback) { 
    /* ... */ 

    method.retrnFunc = callback;

這在幾乎相同的方式被視爲一個異步調用，因爲你必須等待用戶互動，然後才能處理結果。

http://jsfiddle.net/N2Qu7/5/

來源

2013-05-14 13:32:33

非常感謝！這正如我所料...... – Yesvinkumar 2013-05-14 16:56:05

從自定義（模式）警告框

回答

相關問題