我可以用纯javascript(不使用jquery）创建自定义确认框吗?其工作原理与window.conf相同
can i create custom confirm box in pure javascript (without using jquery) work same as window.confirm?
在confirm.js中有类似于此页面的代码(http://www.developphp.com/view.php?tid=1385（对话框.js）
我想在点击"是"按钮后在php中做一些操作（比如从数据库中删除记录和提交表单），然后点击"否"按钮，它应该返回错误的
这可能吗？
<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>
否您不能完全复制默认的确认/提醒/提示。这些函数会阻止javascript通过该行，直到返回某些内容，这是javascript无法做到的。
有很多自定义模式对话框，为了避免您无法阻止javascript等待响应的事实，它们使用了回调。将一个函数传递给对话框窗口的调用，对话框窗口结束后将执行此函数。
例如：
http://bootboxjs.com/
http://jqueryui.com/dialog/
一个快速的谷歌会给你更多的吨。我以前自己做了一个纯粹的javascript，因为我不想有css文件。它的功能不如其他功能，但它纯粹是javascript，所以这里有一个链接：http://heuuuth.com/applications/JamModal.html
否。
没有办法在DOM中创建一个对话框来阻止JavaScript事件循环。
当你显示它时，你必须停止你正在做的任何事情，然后让对话框中的选项重新启动你停止的过程。
嗨，我的以下评论已被删除。所以现在我已经找到了一个解决方案，我将在下面的评论中给大家：
我用纯javascript创建了一个自定义的确认框代码，看起来和工作都很棒。这太容易了。但问题是，如果我必须在同一个网页上从用户那里获得两个确认，那么我必须编写单独的函数集（每个函数集有两个不同的函数名）。
我看不出回调如何帮助我解决问题。回调函数也会立即执行，而无需等待检查用户是否单击了"确认"或"取消"按钮。
我可以将回调函数名传递给另一个使用setTimeOut（）并等待15分钟等待用户单击Confirm或Cancel的函数吗？单击按钮后，我可以将用户的选择记录在全局变量中，并清除TimeOut（）以立即执行下一部分。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";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
我成功地从同一网页的两个不同位置调用了customConfirm（）。我不得不传递两个不同的响应处理程序回调函数名。在调用customConfirm（）之前，我必须将其值在相应的回调函数中是必需的任何变量设置为全局变量。但付出的努力是值得的；-）
相关文章：
- 如何获得一个与用“”声明的变量工作方式相同的变量;设“;或在with块中
- Var工作，但在使用数组执行相同操作时停止
- 如何停止两个按钮执行相同的工作?在这种情况下，它们都会滚动到顶部
- 图像占位符没有't的工作原理与Angular 1中的相同
- 图片's的高度与手机/平板电脑的高度相同-只能在Chrome中正常工作
- 在 .before(） 中多次使用相同的参数并不像我预期的那样工作
- 完全相同的代码在 Dreamweaver 中无法正常工作
- 为什么需要 CDATA，而不是在任何地方都以相同的方式工作
- 如何将文件夹中每个文件的相同范围合并到主工作表上
- javascript 函数正在工作，但在 jQuery ajax 函数中相同，不起作用
- Ajax Post请求总是运行错误功能，尽管卷曲到相同的url工作正常
- 具有相同代码/数据集的Highcharts代码在PHP中工作，但在JSfiddle中不起作用
- 相同的 jQuery 代码在文件和控制台中的工作方式不同
- JavaScript 按钮不起作用;代码与其他工作按钮相同
- 为什么ajax调用在相同的url下不能正常工作
- 只有在中手动输入时，相同的Javascript变量才能工作
- 我能确定array.slice(）的工作方式与array.stice(0）相同吗
- 谷歌Chrome-使用iframe时屏幕捕获失败，相同的脚本在没有iframe的情况下也能工作
- 我怎样才能使ng-change工作相同的价值以及
- mootools如何使periodic()在所有浏览器中工作相同
