我们可以创建一个带有自定义 div 和消息的 Javascript 确认框吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15329689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can we create a Javascript confirm box with custom div and message
提问by Nikhil K S
I need a javascript confirm boxwith customized design and dynamic message.
我需要一个带有定制设计和动态消息的 javascript确认框。
My problem is: I need a function to call in that call how can i receive the result of that popup; ( like yes or no). Is that possible?
我的问题是：我需要一个函数来调用该调用，我如何才能收到该弹出窗口的结果；（如是或否）。那可能吗？
Code
代码
if (confirm('Are you sure?')){
//Do the process
}
else{
//Show Error
}
I want to override that confirm with my custom style
我想用我的自定义样式覆盖确认
回答by Surya Pratap
How about making a hidden div that will allow the user to respond
如何制作一个允许用户响应的隐藏 div
<div id="confirm" class="noshow">
<div id="messageContent" class="message"></div>
<div id="okButton" onClick="doConfirm(true)" class="button"></div>
<div id="cancelButton" onClick="doConfirm(false)" class="button"></div>
</div>
now you can set the message easily with getElementById('messageContent')similarly you can now handle the okand cancelactions with doConfirm(true)and doConfirm(false)functions
现在您可以使用getElementById('messageContent')类似的方法轻松设置消息，您现在可以使用和功能处理ok和cancel操作doConfirm(true)doConfirm(false)
in a simple manner your javascript will be something like
以简单的方式，您的 javascript 将类似于
doConfirm(flag){
return flag;
}
and have css like
并有 css 喜欢
.noshow{display:none;}
now you can build the html from javascript at runtime and attach the event handlers but this is about the simplest I could think of.
现在您可以在运行时从 javascript 构建 html 并附加事件处理程序，但这是我能想到的最简单的方法。
回答by ChaosPredictor
For me this solution much better:
对我来说，这个解决方案要好得多：
html:
html：
<div id='modal_dialog'>
<div class='title'></div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />
</div>
js:
js：
function dialog(message, yesCallback, noCallback) {
$('.title').html(message);
var dialog = $('#modal_dialog').dialog();
$('#btnYes').click(function() {
dialog.dialog('close');
yesCallback();
});
$('#btnNo').click(function() {
dialog.dialog('close');
noCallback();
});
}
use:
利用：
dialog('Are you sure you want to do this?',
function() {
//If yes do something
console.log("yes");
},
function() {
//If no do something else
console.log("no");
}
);
don't forget to add jquery if you didn't.
如果没有，请不要忘记添加 jquery。
回答by rjv
You can use callbacks to do this
你可以使用回调来做到这一点
Confirm handler, to be added in your global javascript file
确认处理程序，将添加到您的全局 javascript 文件中
function ConfirmInDiv(message, okcallback, cancelcallback) {
$('#confirmation-holder').show();
$("#confirmation_message").text(message);
$('#Confirmation_Ok').unbind('click');
$('#Confirmation_Ok').click(okcallback);
$('#Confirmation_Cancel').unbind('click');
$('#Confirmation_Cancel').click(cancelcallback);
}
function HideConfirmDiv() {
$('#confirmation-holder').hide();
}
HTML, should reside in your layout file:
HTML，应驻留在您的布局文件中：
<div id="confirmation-holder" style="display:none">
<div id="confirmation_message"></div>
<a id="Confirmation_Ok" href="#" class="button">OK</a>
<a id="Confirmation_Cancel" href="#" class="button light-button">Cancel</a>
</div>
And wherever you want to call your javascript confirm:
无论您想在何处调用 javascript 确认：
Instead of this
而不是这个
function delete()
{
if(confirm("Delete?")
{
console.log('deleted');
}
else
{
console.log('delete cancelled');
}
}
do this
做这个
function delete()
{
function ok()
{
console.log('deleted');
HideConfirmDiv();
}
function cancel()
{
console.log('delete cancelled');
HideConfirmDiv();
}
ConfirmInDiv('Delete?', ok, cancel);
}
