我要做一个按钮，采取行动并将数据保存到数据库中。
一旦用户单击按钮，我希望JavaScript警报提供“是”和“取消”选项。如果用户选择“是”，数据将被插入数据库，否则将不采取任何操作。
如何显示这样的对话框？
当前回答
您必须创建自定义confirmBox。无法更改确认功能显示的对话框中的按钮。
jQuery确认框
请参见以下示例：https://jsfiddle.net/kevalbhatt18/6uauqLn6/
<div id="confirmBox">
<div class="message"></div>
<span class="yes">Yes</span>
<span class="no">No</span>
</div>
function doConfirm(msg, yesFn, noFn)
{
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function()
{
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}
按您的代码调用：
doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// Do nothing
});
纯JavaScript确认框
例子：http://jsfiddle.net/kevalbhatt18/qwkzw3rg/127/
<div id="id_confrmdiv">confirmation
<button id="id_truebtn">Yes</button>
<button id="id_falsebtn">No</button>
</div>
<button onclick="doSomething()">submit</button>
剧本
<script>
function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line
document.getElementById('id_truebtn').onclick = function(){
// Do your delete operation
alert('true');
};
document.getElementById('id_falsebtn').onclick = function(){
alert('false');
return false;
};
}
</script>
CSS
body { font-family: sans-serif; }
#id_confrmdiv
{
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: fixed;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#id_confrmdiv button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#id_confrmdiv .button:hover
{
background-color: #ddd;
}
#confirmBox .message
{
text-align: left;
margin-bottom: 8px;
}
其他回答
xdialog提供了一个简单的API xdialog.conf（）。代码片段如下。更多演示可在此处找到
document.getElementById（'test'）.addEventListener（'click'，test）；函数测试（）{xdialog.conf（'确定吗？'，function（）{//如果选择“确定”/“是”，请在此处工作。。。console.info（'Done！'）；}, {style:'宽度：420px；字体大小：0.8rem；'，按钮：{ok：'是文本'，cancel:'无文本'},oncancel:function（）{console.warn（'已取消！'）；}});}<link href=“https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css“rel=”stylesheet“/><script src=“https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js“></script><button id=“test”>测试</button>
如何使用“inline”JavaScript执行此操作：
<form action="http://www.google.com/search">
<input type="text" name="q" />
<input type="submit" value="Go"
onclick="return confirm('Are you sure you want to search Google?')"
/>
</form>
您必须创建自定义confirmBox。无法更改确认功能显示的对话框中的按钮。
jQuery确认框
请参见以下示例：https://jsfiddle.net/kevalbhatt18/6uauqLn6/
<div id="confirmBox">
<div class="message"></div>
<span class="yes">Yes</span>
<span class="no">No</span>
</div>
function doConfirm(msg, yesFn, noFn)
{
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function()
{
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}
按您的代码调用：
doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// Do nothing
});
纯JavaScript确认框
例子：http://jsfiddle.net/kevalbhatt18/qwkzw3rg/127/
<div id="id_confrmdiv">confirmation
<button id="id_truebtn">Yes</button>
<button id="id_falsebtn">No</button>
</div>
<button onclick="doSomething()">submit</button>
剧本
<script>
function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line
document.getElementById('id_truebtn').onclick = function(){
// Do your delete operation
alert('true');
};
document.getElementById('id_falsebtn').onclick = function(){
alert('false');
return false;
};
}
</script>
CSS
body { font-family: sans-serif; }
#id_confrmdiv
{
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: fixed;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#id_confrmdiv button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#id_confrmdiv .button:hover
{
background-color: #ddd;
}
#confirmBox .message
{
text-align: left;
margin-bottom: 8px;
}
这是一个使用普通javascript的完全响应解决方案：
//单击显示对话框btn时调用函数document.getElementById（“btn show dialog”）.onclick=function（）｛show_dialog（）｝；var overlayme=document.getElementById（“对话框容器”）；函数show_dialog（）{/*显示对话框窗口的函数*/overlayme.style.display=“块”；}//如果单击确认btn，则执行函数confim（）document.getElementById（“confirm”）.onclick=function（）｛confirm（）｝；函数确认（）{/*单击确认时执行的代码*/overlayme.style.display=“无”；}//如果单击cancel btn，则执行函数cancel（）document.getElementById（“cancel”）.onclick=function（）｛cancel（）｝；函数cancel（）{/*单击取消时执行的代码*/overlayme.style.display=“无”；}.popup{宽度：80%；填充：15px；左：0；剩余利润：5%；边框：1px实心rgb（1.82,73）；边界半径：10px；颜色：rgb（1.82,73）；背景：白色；位置：绝对；顶部：15%；盒子阴影：5px 5px 5px#000；z指数：10001；字号：700；文本对齐：居中；}.覆盖{位置：固定；宽度：100%；顶部：0；左：0；右：0；底部：0；背景：rgba（0,0,0，.85）；z指数：10000；显示：无；}@介质（最小宽度：768px）{.popup{宽度：66.66666666%；剩余利润：16.4666666%；}}@介质（最小宽度：992px）{.popup{宽度：80%；剩余利润：25%；}}@媒体（最小宽度：1200px）{.popup{宽度：33.33333%；剩余利润：33.33333%；}}对话框btn{背景色：#44B78B；颜色：白色；字号：700；边框：1px实心#44B78B；边界半径：10px；高度：30px；宽度：30%；}对话框btn：悬停{背景色：#015249；光标：指针；}<div id=“content_1”class=“content_dialog”><p>Lorem ipsum dolor坐amet。阿利夸姆拉特（Aliquam erat volutpat）。无侵权行为，无恶意行为</p＞<p>阿利夸姆拉特（Aliquam erat volutpat）。无侵权行为，无恶意行为。Nullam felis tellus，tristique nec egestas in，luctus sed diam.Suspendiss potenti</p＞</div><button id=“btn show dialog”>确定</button><div class=“overlay”id=“dialog container”><div class=“popup”><p>这将被保存。是否继续</p＞<div class=“text right”><button class=“dialog btn btn cancel”id=“cancel”>取消</button><button class=“dialog btn btn primary”id=“confirm”>确定</button></div></div></div>
您可能正在寻找confirm（），它显示一个提示，并根据用户的决定返回true或false：
if（确认（“确定要将此内容保存到数据库中吗？”））{//保存它！console.log（'文件已保存到数据库。'）；}其他{//什么都不要做！console.log（'未将其保存到数据库中。'）；}
推荐文章
- 如何将两个字符串相加，就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数
- 将RGB转换为白色的RGBA
- 如何将“camelCase”转换为“Camel Case”?
