我可以在纯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