如何從確認彈出警報獲取返回值

我正在嘗試進行彈出式警示。它的問題是我無法獲得返回值。這是因爲close函數是在函數本身中創建的。如何從確認彈出警報獲取返回值

有沒有辦法返回值？

HTML

<button id="div" onclick="popup()">START</button> 

<div id="popUp"> 
    <div id="popUpHeader"> 
    </div> 
    <div id="popUpBody"> 
    <h1 id="title"></h1> 
    <p id="txt"></p> 
    </div> 
    <button id="popUpButton">OK</button> 
    <button id="popUpYes">YES</button> 
    <button id="popUpNo">NO</button> 
</div>

function popup() { 
    var a = popupbox('Warning', 'Are you sure?', 'yesno'); 
    alert(a); 
} 

function popupbox(title, txt, type) { 
    document.getElementById('popUp').style.display = 'block'; 
    document.getElementById('title').innerHTML = title; 
    document.getElementById('txt').innerHTML = txt; 

    if(type == 'ok') { 
    document.getElementById('popUpButton').style.display = 'block'; 
    document.getElementById('popUpButton').onclick = function() { 
     document.getElementById('popUp').style.display = 'none'; 
     document.getElementById('overlay').style.display = 'none'; 
    } 
    } else { 
    document.getElementById('popUpYes').style.display = 'block'; 
    document.getElementById('popUpNo').style.display = 'block'; 
    //return true; 
    document.getElementById('popUpYes').onclick = function() { 
     document.getElementById('popUp').style.display = 'none'; 
     return true; 
    } 
    document.getElementById('popUpNo').onclick = function() { 
     document.getElementById('popUp').style.display = 'none'; 
     return false; 
    } 
    } 
}

CSS

#popUp { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 50%; 
    margin-left: -100px; 
    background: white; 
    width: 250px; 
    min-height: 100px; 
    border-radius: 4px 4px 4px 4px; 
    border: 1px solid #888; 
    border-top: 5px solid black; 
    box-shadow: 0px 2px 10px #999; 
    z-index: 9999; 
    text-align: center; 
} 
#popUpBody { 
    margin: 3px 0px 3px 0px; 
} 
#popUpBody h1 { 
    margin-top: 10px; 
    font-family: 'Roboto', sans-serif; 
    font-size: 15px; 
} 
#popUpBody p { 
    padding: 10px 10px 0px 10px; 
    color: black; 
    font-family: 'Roboto', sans-serif; 
    font-size: 15px; 
    margin: 0 auto; 
    /*ADJUST HEIGHT ACCORDING CONTENTS*/ 

    margin-bottom: 50px; 
} 
#popUpButton { 
    display: none; 
    position: absolute; 
    bottom: 0px; 
    width: 60px; 
    margin: 10px 0px 10px 60px; 
    padding: 5px; 
    font-size: 14px; 
} 
#popUpYes { 
    display: none; 
    position: absolute; 
    bottom: 0px; 
    width: 60px; 
    margin: 10px 0px 10px 40px; 
    padding: 5px; 
    font-size: 14px; 
} 
#popUpNo { 
    display: none; 
    position: absolute; 
    bottom: 0px; 
    width: 60px; 
    margin: 10px 0px 10px 110px; 
    padding: 5px; 
    font-size: 14px; 
}

來源

2015-12-03 Ethannn

你不應該使用'prompt'嗎？ – Danield

我想使用自制提示盒 – Ethannn

由於您的語句被執行後，用戶輸入給出，你需要使用回調處理程序正如我在3號線已經更新

更新了fiddle你

function popup(){ 
var a = popupbox('Warning','Are you sure?','yesno', function(){alert('yes')}, function(){alert('no')}); 
    //alert(a); 
} 



function popupbox(title,txt,type, okCallback, noCallBack){ 
    document.getElementById('popUp').style.display = 'block'; 
    document.getElementById('title').innerHTML = title; 
    document.getElementById('txt').innerHTML = txt; 

    if(type == 'ok'){ 
     document.getElementById('popUpButton').style.display = 'block'; 
     document.getElementById('popUpButton').onclick = function(){ 
      document.getElementById('popUp').style.display = 'none'; 
      document.getElementById('overlay').style.display = 'none'; 
     okCallback(); 
     } 
    } else { 
     document.getElementById('popUpYes').style.display = 'block'; 
     document.getElementById('popUpNo').style.display = 'block'; 
     //return true; 
     document.getElementById('popUpYes').onclick = function(){ 
      document.getElementById('popUp').style.display = 'none'; 
     okCallback(); 
      return true; 
     } 
     document.getElementById('popUpNo').onclick = function(){ 
      document.getElementById('popUp').style.display = 'none'; 
     noCallBack(); 
      return false; 
     } 
    } 
}

來源

2015-12-03 10:50:31 gurvinder372

感謝gurvinder，我沒有意識到回調函數。現在有些事要讀。 – Ethannn

@Ethannn很樂意幫忙 – gurvinder372

我玩過它，但它似乎不能將一個值作爲變量返回。有另一種方法嗎？ – Ethannn

怎麼樣使用一個確認框，而不是一個警報的做同樣的功能用IF語句？

var s = confirm('Are you sure? :'); 

    if (s == true) { 

}

來源

2015-12-03 10:46:24

就像我說的我想使用定製/自制的確認框 – Ethannn

的問題是，你的popupbox函數返回imideatly。在你的彈出框功能中，你設置了具有返回值的onclick事件。這不會影響您的popupbox函數的返回值（因爲onclick函數在用戶單擊時異步執行;）。

如果你想能夠處理用戶輸入，你應該創建回調函數，用戶gurvinder372在他的回答中解釋了執行onclick事件。

來源

2015-12-03 10:51:40

hello @ user3656699這個回調函數沒有辦法。謝謝！ – Ethannn

如何從確認彈出警報獲取返回值

回答

相關問題