2012-08-31 4 views
9

Sto tentando di utilizzare Twitter bootstrap modal invece della finestra di conferma personalizzata.Utilizzo del modal bootstrap di Twitter invece della finestra di conferma

mia funzione

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> 

chiamando la funzione

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

il problema è la funzione getConfirm non restituisce vero o falso.


codice di lavoro:

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

codice pezzo dopo modifiche & modifiche/non funzionante

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

finalmente ho deciso di utilizzare bootboxjs

risposta

22

tuo l'approccio è sbagliato, verrà eseguito in modo asincrono in modo tale da non attendere la chiusura della finestra di dialogo modale prima di tornare. Provare qualcosa di simile:

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... 
}); 

Nota però è davvero solo bisogno di inizializzare il modal una volta e agganciare gli eventi una volta. Darei il corpo modale e l'ID e cambierei semplicemente il contenuto prima di mostrarlo.

È inoltre necessario impostare lo sfondo su vero, si desidera una conferma per impedire all'utente di accedere alla pagina fino alla conferma.

+0

funziona bene ma la mia funzione non è in attesa della funzione getConfirm. – Ayhan

+0

Soluzione incredibile. Grazie! – Houman

+6

Una buona soluzione, ma funzionerà in modo incoerente dopo diverse chiamate, poiché i callback assegnati ai pulsanti non vengono rimossi e verranno tutti valutati dopo N chiamate. Qualcosa come il seguire sarà sufficiente se non si hanno altri eventi collegati: '$ ('# confirmFalse'). Off(). Click (function() {' –