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

本文翻译自：How to create a dialog with “yes” and “no” options?

I am going to make a button to take an action and save the data into a database. 我将创建一个按钮来执行操作并将数据保存到数据库中。

Once the user clicks on the button, I want a JavaScript alert to offer “yes” and “cancel” options. 一旦用户点击按钮，我想要一个JavaScript提醒，提供“是”和“取消”选项。 If the user selects “yes”, the data will be inserted into the database, otherwise no action will be taken. 如果用户选择“是”，则数据将被插入数据库，否则将不执行任何操作。

How do I display such a dialog? 如何显示这样的对话框？

---

#1楼

参考：https://stackoom.com/question/dAMe/如何使用-是-和-否-选项创建对话框

---

#2楼

Avoid inline JavaScript - changing the behaviour would mean editing every instance of the code, and it ain't pretty! 避免内联JavaScript - 改变行为意味着编辑代码的每个实例，而且它不漂亮！

A much cleaner way is to use a data attribute on the element, such as data-confirm="Your message here" . 更简洁的方法是在元素上使用数据属性，例如data-confirm="Your message here" 。 My code below supports the following actions, including dynamically-generated elements: 我的下面的代码支持以下操作，包括动态生成的元素：

• a and button clicks a和button点击
• form submits 提交form
• option selects option选择

jQuery: 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: 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 JSFiddle演示

---

#3楼

You have to create custome confirmBox ,it is not possible to change the buttons in the dialog displayed by the confirm function. 您必须创建custome confirmBox ，无法更改confirm功能显示的对话框中的按钮。

Jquery confirmBox Jquery confirmBox

---

see this example: https://jsfiddle.net/kevalbhatt18/6uauqLn6/ 看到这个例子： 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(); } 

Call it by your code: 通过您的代码调用它：

 doConfirm("Are you sure?", function yes() { form.submit(); }, function no() { // do nothing }); 

** Pure JavaScript confirmBox** **纯JavaScript confirmBox **

---

Example : http://jsfiddle.net/kevalbhatt18/qwkzw3rg/127/ 示例 ： http ： //jsfiddle.net/kevalbhatt18/qwkzw3rg/127/

\n\n

 <div id="id_confrmdiv">confirmation <button id="id_truebtn">Yes</button> <button id="id_falsebtn">No</button> </div> <button onclick="doSomething()">submit</button> 

\n\n

Script : 脚本 ：

 <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 : 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; } 

---

#4楼

This plugin can help you jquery-confirm easy to use 这个插件可以帮助你jquery确认易于使用

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

---

#5楼

Another way to do this: 另一种方法：

$("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


   });

---

#6楼

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';       
   }
});