[Javascript] 如何用“是”和“否”选项创建对话框?


Answers

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

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

Question

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

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

我如何显示这样的对话框?




另一种方法来做到这一点:

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


   });



这个插件可以帮助你jquery-confirm易于使用

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

});




避免内联JavaScript - 改变行为意味着编辑代码的每一个实例,而且这不太好!

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

  • abutton点击
  • 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演示