0

以下のコードを見つけてください...

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) を返す方法を教えてください。

前もって感謝します....！

4

3 に答える 3

2

お気づきのように、カスタム モーダルはデフォルトのconfirmポップアップと同じようにブロックしません。そのため、コードですぐに結果を返すことはできません。1 つのオプションは、コールバック関数をパラメータとして に渡すこと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-14T13:32:33.377 に答える
1

このように JavaScript スレッドを停止することはできませんconfirmが、次のことを行う必要はありません。

コールバック関数に渡す設定の 1 つを作成し、openその関数を呼び出して、どのボタンが押されたか (またはそれを伝える必要があるもの) を伝える引数を指定します。

あなたのコードでは、モーダルに 1 つの変数セットを再利用しているように見えるので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);
    }
});
于 2013-05-14T13:38:48.007 に答える