堆棧內存溢出
  簡體   English   中英

從自定義（模態）警告框返回值

[英]Return a value from custom (modal) alert box

 原文  2013-05-14 13:14:41  4   3    jquery/ jquery-mobile

問題描述

請找到以下代碼...... 

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

在上面的確認框中單擊“確定”后，您將獲得返回值“true”和“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>

建議我如何從jquery自定義模態框插件返回值（0或1），如上面的確認框？

提前致謝....！

3 個解決方案

解決方案1
 2  2013-05-14 13:32:33

正如您所注意到的，您的自定義模式不會像默認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/

解決方案2
 1 已采納  2013-05-14 13:38:48

您不能像confirm那樣停止JavaScript線程，但您不需要：

讓你傳遞的一個設置open一個回調函數，並用一個參數調用該函數，告訴它按下了什么按鈕（或者它需要告訴它的其他任何東西）。

在您的代碼中，您似乎為模式重用了一組變量，因此您需要向big var添加callback並從open的settings對象分配callback 。 然后在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);
    }
});

解決方案3
 -1  2013-05-14 13:19:35

簡單來說，使用第三運算符： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從引導程序的模態框返回值是或否 模態警報框 自定義提醒/確認框 使用自定義彈出式警報框使用 PHP 從 mysql 中刪除 Ajax 使用Jqtouch的iPhone的模式警報框 像Mac警報一樣的jQuery模式框 自定義確認和警報對話框 等待來自 Javascript 模式的“返回值” 使用iframe從模態窗口返回值 MVC從jqueryui對話框模態返回值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM