我可以在純JavaScript中創建自定義確認框（不使用jquery）與window.confirm相同嗎？

Question

在confirm.js中，有類似此頁面的代碼（ http://www.developphp.com/view.php?tid=1385(dialog.js））

我想在php中做一些操作（例如從數據庫中刪除記錄和提交表單），然后單擊“是”按鈕，否則，它應該返回false

這可能嗎？

<script type="text/javascript" src="confirm.js"></script>
<script type="text/javascript">
function validation()
{
    if(document.getElementById('tbox').value=='')
    {
        alert('enter value');
        return false;
    }
    else
    {
        confirm.render('','','sub_btn');
    }
}
</script>
<form method="get">
    <table width="100%" height="500px" z-index="500000" style="background:yellow;">
        <tr>
            <td>
                <input type="text" id="tbox">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" id="sub_btn" value="Submit" onclick="return validation()">
            </td>
        </tr>
    </table>
</form>

Answer 1

不，您不能完全復制默認的確認/警告/提示提示。 這些會阻止javascript運行到該行，直到返回某些內容為止，而這是無法通過javascript執行的。

有很多自定義模態對話框，為了避免無法阻止javascript等待響應這一事實，它們改用callbacks 。 您將一個函數傳遞給對話窗口的調用，然后在對話窗口完成后將執行此函數。

有一些示例：

http://bootboxjs.com/

http://jqueryui.com/dialog/

一個快速的谷歌將給你更多的噸。 我以前純粹是用JavaScript編寫的，因為我不想擁有CSS文件。 它的功能幾乎不如其他功能，而是純JavaScript，因此這里是一個鏈接： http : //heuuuth.com/applications/JamModal.html

Answer 2

沒有。

無法在DOM中創建會阻止JavaScript事件循環的對話。

顯示時，您必須停止所做的任何事情，然后讓對話框中的選項重新開始您停止的過程。

Answer 3

嗨，我的以下評論已刪除。 現在，我找到了解決方案，在下面的注釋中將其提供給大家：

我已經用純JavaScript創建了一個自定義確認框代碼，看起來和效果都很好。 太容易了。 但是問題是，如果我必須在同一網頁上從用戶那里獲得2條確認信息，那么我就必須編寫單獨的一組功能（對於每個具有不同功能名稱的功能，則要編寫2組）。

我沒有看到回調如何幫助我解決問題。 回調函數也將立即執行，而無需等待檢查用戶是否單擊“確認”或“取消”按鈕。

是否可以將回調函數名稱傳遞給使用setTimeOut（）的另一個函數，並等待15分鍾，以便用戶單擊“確認”或“取消”？ 單擊按鈕后，我可以將用戶的選擇記錄在全局變量中，然后將clearTimeOut（）記錄下來，以立即執行下一部分。 15分鍾后，如果未收到用戶響應，則將其視為響應“取消”，這應該是安全的。 任何人都想嘗試解決這個問題嗎？

我不會觸摸或閱讀jQuery，Angular等。請讓我脫離這些討論。

好的，這里是解決方案。 主文件是customConfirm.htm：-

<html>
<head>
<style>
/* ~~~~~~~~~~~~~~~ Style for the pop box with blackener ~~~~~~~~~~~~~~~~~~~ */
.popBoxStyle { position: absolute; text-align: center;

visibility:hidden;
z-index: 2000;                                                              /* Nairit: Set high so that shows over page contents */
cursor: default;

background-color: #FFFFFF;
border:2px solid;
border-color: #6F7072;
border-radius:6px;                              /* More gives rounder edges */
box-shadow: 10px 10px 5px #606060;              /* Shadow can be used when black overlay is not used on the rest of the page. Or black has low opacity */

filter:alpha(opacity=100);                                          /* Works in IE */
opacity:1.0;                                                        /* Works in others. This is for the opacity of the box's background */

padding:3px;
}

.liner { clear:both; height:1px; background-color:#cccccc; }
.spacer { clear:both; height:5px; }

.black { position:absolute; z-index:1999; }

button.close { float:right; margin:5px; cursor:pointer; background-color:#d9534f !important; border-radius:4px !important; color:#fff !important; font-size:21px; font-weight:bold; line-height:1; color:#000000; }
/* ~~~~~~~~~~~~~ Style for the pop box with blackener ends ~~~~~~~~~~~~~~~~~~ */
</style>

<script language="javascript" src="PopBox.js"></script>
<script language="javascript">
var affirm = false; tm_ref=null, cb_func_name=null;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function customConfirm(func,msg)
{
initializePopBox();

popBox.innerHTML = "<table width='100%' cellspacing='0' cellpadding='5' border='0'>" +
"<tr><td>CONFIRM</td>" +
    "<td><button type='button' class='close' style='float:right;margin:5px;' onClick='setUserResponse(false);'>x</button></td></tr>" +
"<tr><td colspan='2'><div class='liner'></div></td></tr>" +
"<tr><td colspan='2'>"+msg+"</td></tr>" +
"<tr align='right'>" +
    "<td><input type='button' name='b_cancel' value='Cancel' onClick='setUserResponse(false);'></td>" +
    "<td><input type='button' name='b_confirm' value='Confirm' onClick='setUserResponse(true);'></td></tr>" +
"</table>";

aWidth = 300; aHeight = 150;
finalizePopBox(50);
cb_func_name = func;                        // Storing the callback function's name globally
tm_ref = setTimeout(func, 30000);           // 60000 milli seconds = 1 minute. 600000 milli seconds = 10 minutes. 900000 milli seconds = 15 minutes
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function handleConfirmResponse()
{
hidePop();
    if( affirm )
    {
    alert("He said Yes");       // Do your work here
    }

    else
    {
    alert("He said No");        // Do nothing
    }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function setUserResponse(respo)
{
affirm = respo;
clearTimeout(tm_ref);
cb_func_name();                 // Gets the function name from global and calls it
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</script>
</head>

<body>
<div id="blackener" class="black"></div>
<div id="popContainer" class="popBoxStyle"></div>                   <!-- NK: The pop-up appears in this div -->

<input type="button" name="b1" value="Delete" onClick="customConfirm(handleConfirmResponse,'Are you sure?');">

</body>
</html>

支持的文件是PopBox.js：-

var popBox, popBoxStyl, BlackRef, aWidth, aHeight;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function initializePopBox()
{
popBox = document.getElementById("popContainer");
popBoxStyl = document.getElementById("popContainer").style;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function finalizePopBox(tp)     // Height from page top
{
popBoxStyl.width = aWidth + "px";
popBoxStyl.height = aHeight + "px";
popBoxStyl.left = parseInt(  ( (document.body.clientWidth - aWidth)/2 )  ) + "px";
    if(tp)
    popBoxStyl.top = tp;
    else
    popBoxStyl.top = parseInt(  ( (document.body.clientHeight - aHeight)/2 )  ) + "px";

popBoxStyl.visibility = "visible";          // Nairit: So they are using .style.visibility = . Not .style.display = which I use normally. Learn this way.
blacken();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function blacken()
{
BlackRef = document.getElementById("blackener");

var ht = document.body.scrollHeight;                // document.body.scrollHeight > document.body.offsetHeight > document.body.clientHeight
var wd = document.body.offsetWidth;                 //alert(ht); alert(wd);

BlackRef.style.left = "0px";
BlackRef.style.top = "0px";
BlackRef.style.height = ht + "px";
BlackRef.style.width = wd + "px";

BlackRef.style.backgroundColor = "#000000";
BlackRef.style.opacity = "0.5";
BlackRef.style.filter = 'alpha(opacity=50)';

BlackRef.style.display = "block";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function hidePop()
{
popBoxStyl.visibility = "hidden";

BlackRef.style.backgroundColor = "#ffffff";
BlackRef.style.opacity = "1.0";
BlackRef.style.filter = 'alpha(opacity=100)';

BlackRef.style.display = "none";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

我在同一網頁的2個不同位置成功調用了customConfirm（）。 我必須傳遞2個不同的響應處理程序回調函數名稱。 在調用customConfirm（）之前，我必須全局設置在各自的回調函數中需要其值的任何變量。 但是值得付出努力;-)

我可以在純JavaScript中創建自定義確認框（不使用jquery）與window.confirm相同嗎？

問題描述

3 個解決方案

解決方案1
2 2014-09-04 15:28:34

解決方案2
1 已采納 2014-09-04 15:11:24

解決方案3
0 2018-07-27 13:22:52

我可以在純JavaScript中創建自定義確認框（不使用jquery）與window.confirm相同嗎？

問題描述

3 個解決方案

解決方案1 2 2014-09-04 15:28:34

解決方案2 1 已采納 2014-09-04 15:11:24

解決方案3 0 2018-07-27 13:22:52

解決方案1
2 2014-09-04 15:28:34

解決方案2
1 已采納 2014-09-04 15:11:24

解決方案3
0 2018-07-27 13:22:52