2012-08-31 86 views
9

我正在嘗試使用twitter引導模式而不是自定義確認對話框。使用Twitter引導模式而不是確認對話框

我的功能

function getConfirm(confirmMessage){ 
    if (confirmMessage == undefined){ 
     confirmMessage = ''; 
    } 
    $('#confirmbox').modal({ 
    show:true, 
     backdrop:false, 
     keyboard: false, 
    }); 

    $('#confirmMessage').html(confirmMessage); 
    $('#confirmFalse').click(function(){ 
     $('#confirmbox').modal('hide'); 
     return false; 
    }); 
    $('#confirmTrue').click(function(){ 
     $('#confirmbox').modal('hide'); 
     return true; 
    }); 
} 
</script> 
<div class="modal" id="confirmbox" style="display: none"> 
    <div class="modal-body"> 
     <p id="confirmMessage">Any confirmation message?</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" id="confirmFalse">Cancel</button> 
     <button class="btn btn-primary" id="confirmTrue">OK</button> 
    </div> 
</div> 

調用函數

var confimChange=getConfirm("Do You confirm?"); 
if(confimChange){ 
    alert('perfect you confirmed') 
}else{ 
    alert('why didnt you confirmed??') 
} 

問題是getConfirm功能不返回true或false。


工作代碼:修改後

if(receiverListCount > 0){ 
    var confimChange=confirm("Message"); 
    if(confimChange){ 
     resetReceiverList(); 
    }else{ 
     return false; 
    } 
} 

一段代碼&更改/不工作

if(activeDiv == '#upload'){ 
    if(listOfSelectedGroups.length> 0|| receiverListCount > 0){ 
     getConfirm("message",function(result){ 
      if(result){ 
       resetReceiverList(); 
      }else{ 
       return false; 
      } 
     }); 
    } 
} 

finaly我決定用bootboxjs

回答

22

你方法是錯誤的,它會異步執行一種方式,以便在返回之前不會等待模態對話框關閉。嘗試是這樣的:

function getConfirm(confirmMessage,callback){ 
    confirmMessage = confirmMessage || ''; 

    $('#confirmbox').modal({show:true, 
          backdrop:false, 
          keyboard: false, 
    }); 

    $('#confirmMessage').html(confirmMessage); 
    $('#confirmFalse').click(function(){ 
     $('#confirmbox').modal('hide'); 
     if (callback) callback(false); 

    }); 
    $('#confirmTrue').click(function(){ 
     $('#confirmbox').modal('hide'); 
     if (callback) callback(true); 
    }); 
} 

getConfirm('Are you sure?',function(result) { 
    // Do something with result... 
}); 

不過請注意,你真正需要的只是一次初始化模式和掛鉤的事件一次。我會給模式的身體和身份證,並簡單地更改顯示之前的內容。

您還應該將背景設置爲true,您需要進行確認以防止用戶在確認之前訪問該頁面。

+0

它工作正常,但我的功能並不等待getConfirm函數。 – Ayhan

+0

令人驚歎的解決方案。謝謝! – Houman

+6

好的解決方案,但會在多次調用後不一致地工作,因爲分配給按鈕的回調沒有被移除,並且它們都將在N次調用後被評估。如果你沒有附加其他事件,那麼下面的東西就足夠了:'$('#confirmFalse')。off()。click(function(){' –