jquery - 从自定义（模态）警报框中返回一个值

Question

请找到以下代码...

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

在上面的确认框中点击“OK”，会得到返回值“true”，点击“CANCEL”则返回“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），如上面的确认框？

提前致谢....！

score 2 · Accepted Answer

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

score 1 · Accepted Answer

你不能像这样停止 JavaScript 线程confirm，但你不需要：

进行您传递open给回调函数的设置之一，并使用参数调用该函数，告诉它按下了哪个按钮（或者它需要告诉它的任何其他内容）。

在您的代码中，您似乎为您的模式重用了一组变量，因此您将添加callback到您的 bigvar并从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);
    }
});

score -1 · Accepted Answer

-1

简而言之，并使用三级运算符：

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

于 2013-05-14T13:19:35.340 回答

jquery - 从自定义（模态）警报框中返回一个值

3 回答 3

Related

Reference