2015-04-28 19 views
7

Lasciami spiegare: quando si chiama un avviso() in JS, tutto il codice che si trova in basso dell'avviso si interromperà e quando si fa clic su OK , il codice restituisce lavoro.Arresta tutto il codice e continua in seguito, come un avviso() in JS

io fare il mio avviso personalizzato con questo codice:

function cAlert() 
{ 
var bOn; 
this.show = function (content) 
{  
    bOn = true; 
    document.write('<div id="turnOffLight"></div><div id="cAlertBox"><div id="cAlertImageBox"><img style="position: absolute; top: 54%; left: 50%; margin-top: -32px; margin-left: -32px;" src="Images/Vectors/1429744831_678136-shield-warning-64.png" alt=""/> </div><div id="cAlertContentBox"> </div><div id="cAlertButtonBox"><input id="cAlertButtonStyle" type="button" value="OK" onclick="cAlert.ok()" /></div></div>'); 
    $("#cAlertContentBox").html(content); 
    $("#cAlertBox").show(); 
    $("#turnOffLight").fadeIn("fast"); 

    var div = document.getElementById('cAlertBox').offsetWidth; 
    var res = -Math.abs(div/2); 
    document.getElementById('cAlertBox').style.marginTop = res + "px"; 
}; 
this.ok = function() 
{ 
    $("#cAlertBox").hide(); 
    $("#turnOffLight").fadeOut("medium"); 
    bOn = false; 
}; 
} 

e nelle altre pagine:

<head> 
    <script src="Scripts/jQuery_1.11.2.js" type="text/javascript"></script> 
    <script src="Scripts/cAlertScript.js" type="text/javascript"></script> 
    <script type="text/javascript">var cAlert = new cAlert();</script> 
</head> 

ma ho un problema, in pagina di login, dopo la chiamata il cAlert(), lo chiamo:

echo "<script>javascript:history.go(-1)</script>"; 

per tornare all'ultima pagina, quando usavo l'avviso(), solo dopo che l'utente ha fatto clic su OK, il browser torna all'ultima pagina, ma utilizzando il cAlert, il browser ritorna già all'ultima pagina.

Quello che voglio è che l'utente deve fare clic sul pulsante OK per continuare il codice come avviso().

+1

Questo è solo impossibile in JS oltre che per le funzioni native 'alert()', 'conferma() ', e' prompt() '. Solo quelli hanno la capacità di interrompere il thread di esecuzione. A meno che non si abbia voglia di scrivere il proprio motore JavaScript che fermerebbe l'esecuzione anche su qualche altra funzione ...: P +1 per domande ben scritte comunque. – Scimonster

risposta

0

Poiché si desidera che la pagina ritorni indietro dopo aver fatto clic sul pulsante OK, posizionare la chiamata di funzione o il codice per tornare alla funzione cAlert.ok(). In questo modo la pagina tornerà indietro solo dopo che l'utente ha fatto clic sul pulsante OK poiché questa funzione viene richiamata solo quando l'utente fa clic sul pulsante OK.

this.ok = function() 
{ 
    $("#cAlertBox").hide(); 
    $("#turnOffLight").fadeOut("medium"); 
    bOn = false; 

    window.history.go(-1); 
}; 
+0

Questo non servirà a me perché voglio usare questo avviso in altre pagine, e non via, ho bisogno di tornare all'ultima pagina ... –

+0

@ JuniorVenâncio: Quindi passare una richiamata a 'cAlert' ... – Bergi

2

Change cAlert.show(content)-cAlert.show(content, success). Cambia cAlert.ok() a cAlert.ok(' + success + '). Modificare this.ok = function() a this.ok = function (success) e infine aggiungere success(); alla fine della funzione ok().

Questo chiamerà success quando si fa clic sul pulsante nel cAlert.

Invece di chiamare cAlert.show("text") ora è necessario chiamare cAlert.show("text", function() { javascript:history.go(-1); }).


Così il vostro codice dovrebbe essere ora:

function cAlert() 
{ 
var bOn; 
this.show = function (content, success) 
{  
    bOn = true; 
    document.write('<div id="turnOffLight"></div><div id="cAlertBox"><div id="cAlertImageBox"><img style="position: absolute; top: 54%; left: 50%; margin-top: -32px; margin-left: -32px;" src="Images/Vectors/1429744831_678136-shield-warning-64.png" alt=""/> </div><div id="cAlertContentBox"> </div><div id="cAlertButtonBox"><input id="cAlertButtonStyle" type="button" value="OK" onclick="cAlert.ok(' + success + ')" /></div></div>'); 
    $("#cAlertContentBox").html(content); 
    $("#cAlertBox").show(); 
    $("#turnOffLight").fadeIn("fast"); 

    var div = document.getElementById('cAlertBox').offsetWidth; 
    var res = -Math.abs(div/2); 
    document.getElementById('cAlertBox').style.marginTop = res + "px"; 
}; 
this.ok = function (success) 
{ 
    $("#cAlertBox").hide(); 
    $("#turnOffLight").fadeOut("medium"); 
    bOn = false; 

    success(); 
}; 
} 

e:

<head> 
    <script src="Scripts/jQuery_1.11.2.js" type="text/javascript"></script> 
    <script src="Scripts/cAlertScript.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var cAlert = new cAlert(); 
     cAlert.show("text", function() { javascript:history.go(-1); }); 
    </script> 
</head> 
+0

Io uso this: echo ""; Viene visualizzato l'avviso, ma quando faccio clic su Ok, non succede nulla. –

+0

lol ho dimenticato di modificare metà del codice, e in seguito ho capito che non funzionava in primo luogo. Dovrebbe funzionare ora, però, l'ho provato ... Quindi controlla il post modificato e spero di non aver perso nulla. – DutChen18