如何使用“是”和“否”选项创建对话框？

Question

我将制作一个按钮来执行操作并将数据保存到数据库中。

一旦用户点击按钮，我想要一个JavaScript警报提供“是”和“取消”选项。如果用户选择“是”，则数据将被插入到数据库中，否则不会采取任何行动。

如何显示这样的对话框？

Answer 1

你可能寻找confirm()，它显示一个提示，并返回true或基于用户决定什么false：

if (confirm('Are you sure you want to save this thing into the database?')) { 
    // Save it! 
} else { 
    // Do nothing! 
} 

Answer 2

您可以拦截JS的onSubmit事件。然后调用确认提醒，然后获取结果。

Answer 3

var answer = confirm("Save data?") 
if (answer) { 
    //some code 
} 
else { 
    //some code 
} 

使用confirm，而不是警告。这是实现该功能的最简单方法。

Answer 4

如何使用要做到这一点“内联”的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> 

Answer 5

避免内联JavaScript - 更改行为将意味着编辑代码的每个实例，并且它不美观！

更简洁的方法是在元素上使用数据属性，如data-confirm="Your message here"。下面我的代码支持下列操作，包括动态生成的元素：

• a和button点击
• form提交
• option选择

的jQuery：

$(document).on('click', ':not(form)[data-confirm]', function(e){ 
    if(!confirm($(this).data('confirm'))){ 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
    } 
}); 

$(document).on('submit', 'form[data-confirm]', function(e){ 
    if(!confirm($(this).data('confirm'))){ 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
    } 
}); 

$(document).on('input', 'select', function(e){ 
    var msg = $(this).children('option:selected').data('confirm'); 
    if(msg != undefined && !confirm(msg)){ 
     $(this)[0].selectedIndex = 0; 
    } 
}); 

HTML ：

<!-- hyperlink example --> 
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a> 

<!-- button example --> 
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button> 

<!-- form example --> 
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?"> 
    <button type="submit">Submit</button> 
</form> 

<!-- select option example --> 
<select> 
    <option>Select an option:</option> 
    <option data-confirm="Are you want to select this option?">Here</option> 
</select> 

JSFiddle demo

Answer 6

你必须创建custome confirmBox，这是不可能改变被确认函数在对话框中显示的按钮。

Jquery的confirmBox

---

看到这个例子：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 confirmBox **

---

例：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; 
} 

Answer 7

这个插件可以他lp you jquery-confirm易于使用

$.confirm({ 
title: 'Confirm!', 
content: 'Simple confirm!', 
confirm: function(){ 
    alert('Confirmed!'); 
}, 
cancel: function(){ 
    alert('Canceled!') 
} 

}）;

Answer 8

另一种方式来做到这一点：

$("input[name='savedata']").click(function(e){ 
     var r = confirm("Are you sure you want to save now?"); 

     //cancel clicked : stop button default action 
     if (r === false) { 
      return false; 
     } 

     //action continues, saves in database, no need for more code 


    }); 

Answer 9

document.getElementById("button").addEventListener("click", function(e) { 
    var cevap = window.confirm("Satın almak istediğinizden emin misiniz?"); 
    if (cevap) { 
    location.href='Http://www.evdenevenakliyat.net.tr';  
    } 
});