如何创建带有“是”和“否”选项的对话框

IT技术 javascript dialog
2021-01-16 20:51:29

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

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

如何显示这样的对话框?

6个回答

您可能正在寻找confirm(),它显示提示并返回truefalse基于用户的决定:

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}

@JacobRaccuia 或者干脆 if(!confirm('message')) return;
2021-03-16 20:51:29
@Owen 不。规范说你只需要提供一条消息。您可以模拟 HTML 中的对话框(尽管它不会像内置对话框那样阻塞)。jQuery Dialog是实现这种事情的一个很好的例子。
2021-03-26 20:51:29
确认有确定和取消按钮。这些按钮可以设置为 YES/NO 吗?
2021-04-01 20:51:29
注意:你可以return在 else 里面放一个,然后你不需要把所有的代码都包装在确认中!(尽管逐案修复)
2021-04-02 20:51:29
confirm在 React 中使用时,我不得不使用window.confirm以避免Unexpected use of confirm错误
2021-04-10 20:51:29
var answer = window.confirm("Save data?");
if (answer) {
    //some code
}
else {
    //some code
}

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

你也可以去if(confirm("...")){代替
2021-03-25 20:51:29

如何使用“内联”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>
最好处理表单的 onsubmit 事件:使用您的代码,如果用户按文本输入,表单将在没有任何请求的情况下提交!
2021-03-20 20:51:29
没问题:) 通常有不止一种方法可以给猫剥皮。我只是想确认我的方法有效。使用<form onsubmit="...">您建议的方法也可以:)
2021-03-22 20:51:29
好吧,我很确定我在说什么,但我没有测试过,我错了。对不起!
2021-03-24 20:51:29
@p91paul - 哪个浏览器对你来说失败了?我只是尝试在 Windows 上的 IE、Chrome 和 Safari 中按 Enter 键,它按预期工作。jsfiddle.net/ALjge/1
2021-03-27 20:51:29

避免内联 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 演示

我以前没想过的非常干净的解决方案。可以更简洁:$("[data-confirm]").on('click,submit', function() { /* ... */ })
2021-03-22 20:51:29
@rogerdpack 是的,但是使用数据属性的美妙之处在于您可以confirm()在不更改 HTML 的情况下更改为您想要的任何内容。
2021-03-29 20:51:29
这些都是很好的例子,尽管它们都使用了 confirm() 对话框,因此您不能重命名取消/确定按钮 :|
2021-03-30 20:51:29
@GrimaceofDespair 我已经更新了代码,因为单击并确认type="button"然后询问用户是否要提交表单(因为您正在单击表单元素),这显然在再次单击确定后没有发生。
2021-04-02 20:51:29
抱歉,忍不住再看一遍。第一:事件应该用空格分隔。第二:你仍然可以收紧代码jsfiddle.net/jguEg ;)
2021-04-06 20:51:29

您必须创建一个自定义的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 而不是那么多 css。喜欢 :D
2021-03-13 20:51:29
@rogerdpack 如果你喜欢答案,那么你可以投票:P
2021-03-19 20:51:29
@rogerdpack 我更新了小提琴让我知道是否需要我身边的任何东西:)
2021-03-20 20:51:29
按下某个项目后,确认框应消失。此外,您应该使用类,而不是 ID。
2021-03-21 20:51:29
伙计们,你们有很好的例子,这是一个 POC。如果你不喜欢它,适应你的需求,不要责怪作者。注意:jquery confirmBox 示例链接不再有效。顺便说一下,Pure JS 就是一个很好的例子。
2021-03-25 20:51:29