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


658

我将要做出一个按钮来采取行动,并将数据保存到数据库中。

用户单击按钮后,我希望JavaScript警报提供“是”和“取消”选项。如果用户选择“是”,则数据将被插入数据库中,否则将不执行任何操作。

如何显示这样的对话框?


2
@Szenis漂亮死人简单又不错的风格是/否。我也讨厌XUL对话框,因为它冻结了很多东西。非常感谢。
m3nda 2015年

Answers:


1246

您可能正在寻找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.');
}


125
确认具有“确定”和“取消”按钮。这些按钮可以设置为是/否吗?
Owen

16
@Owen不。该规范说,您只是想提供一条消息。您可以用HTML模拟对话框(尽管不会像内置对话框那样阻塞)。jQuery Dialog是实现这种事情的一个很好的例子。
2013年

3
注意:您可以return在else里面放一个,然后就不需要在确认中包装所有代码了!(不过要逐案解决)
Jacob Raccuia 2014年

21
@JacobRaccuia或干脆if(!confirm('message')) return;
亚伦

1
@Dimple当前无法自定义它。这就是为什么某些网站使用自定义页内对话框而不是本机对话框的原因。
s4y

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

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


15
您也可以if(confirm("...")){改用
Nicolas Bouliane 2014年

75

如何使用“内联” 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>

5
最好处理表单的onsubmit事件:使用您的代码,如果用户按文本输入,则无需任何请求即可提交表单!
p91paul 2013年

1
@ p91paul-这对您来说哪个浏览器会失败?我只是尝试在Windows上的IE,Chrome和Safari中按Enter,它按预期工作。jsfiddle.net/ALjge/1
dana

好吧,我确定自己在说什么,但是我没有经过测试,所以我错了。抱歉!
p91paul 2013年

1
没问题:)通常有不止一种方式给猫皮。我只是想确认我的方法是否有效。也使用<form onsubmit="...">您所建议的作品:)
dana

41

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


2
我从未想过的非常干净的解决方案。甚至可以更加简洁:$("[data-confirm]").on('click,submit', function() { /* ... */ })
绝望的鬼脸

抱歉,无法忍受再次查看它。首先:事件之间应该用空格隔开。第二:你仍然可以收紧代码jsfiddle.net/jguEg ;)
绝望的鬼脸

@GrimaceofDespair我已经更新了代码,因为单击并确认,type="button"然后询问用户是否要提交表单(因为您正在单击表单元素),显然,再次单击确定后并没有发生。
rybo111 2014年

这些都是很好的示例,尽管它们都使用confirm()对话框,所以您无法重命名“取消/确定”按钮:|
rogerdpack '16

@rogerdpack是的,但是使用数据属性的好处是您可以更改confirm()为所需的任何内容而无需更改HTML。
rybo111 '16

22

您必须创建自定义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确认框**


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


2
太好了..非常简单,纯净的javascript而不是太多的CSS。喜欢它:D
m3nda

按下项目后,确认框应消失。另外,您应该使用类,而不是ID。
rybo111

@rogerdpack我更新了小提琴让我知道是否需要我身边的东西:)
Keval Bhatt

@rogerdpack,如果您喜欢回答,那么您可以投票:P
Keval Bhatt

@KevalBhatt,我喜欢您的“纯JS”版本。按下按钮后,有什么方法可以删除/隐藏/任何对话框吗?如果我把document.getElementById('id_confrmdiv').style.display="none";对话框隐藏在方法中为按钮执行的所有命令之后,则将其隐藏。
Andrii Muzychuk

13

这个插件可以帮助您通过jquery确认易于使用

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

8

或者简单地:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>

1
谢谢!我担心我必须将jQuery包含在我的简单CRUD应用程序中才能做一个简单的-确定要删除该对象。
Will Matheson


5

另一种方法是:

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


   });

5

这是使用香草javascript的完整响应式解决方案:

// Call function when show dialog btn is clicked
document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
var overlayme = document.getElementById("dialog-container");

function show_dialog() {
 /* A function to show the dialog window */
    overlayme.style.display = "block";
}

// If confirm btn is clicked , the function confim() is executed
document.getElementById("confirm").onclick = function(){confirm()};
function confirm() {
 /* code executed if confirm is clicked */   
    overlayme.style.display = "none";
}

// If cancel btn is clicked , the function cancel() is executed
document.getElementById("cancel").onclick = function(){cancel()};
function cancel() {
 /* code executed if cancel is clicked */  
    overlayme.style.display = "none";
}
.popup {
  width: 80%;
  padding: 15px;
  left: 0;
  margin-left: 5%;
  border: 1px solid rgb(1,82,73);
  border-radius: 10px;
  color: rgb(1,82,73);
  background: white;
  position: absolute;
  top: 15%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
  font-weight: 700;
  text-align: center;
}

.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display :none;
}

@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 80%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

.dialog-btn {
  background-color:#44B78B;
  color: white;
  font-weight: 700;
  border: 1px solid #44B78B;
  border-radius: 10px;
  height: 30px;
  width: 30%;
}
.dialog-btn:hover {
  background-color:#015249;
  cursor: pointer;
}
<div id="content_1" class="content_dialog">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>

<button id="btn-show-dialog">Ok</button>


<div class="overlay" id="dialog-container">
  <div class="popup">
    <p>This will be saved. Continue ?</p>
    <div class="text-right">
      <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
      <button class="dialog-btn btn-primary" id="confirm">Ok</button>
    </div>
  </div>
</div>


3

xdialog提供了一个简单的API xdialog.confirm()。代码段如下。更多演示可以在这里找到

document.getElementById('test').addEventListener('click', test);

function test() {
  xdialog.confirm('Are you sure?', function() {
    // do work here if ok/yes selected...
    console.info('Done!');
  }, {
    style: 'width:420px;font-size:0.8rem;',
    buttons: {
      ok: 'yes text',
      cancel: 'no text'
    },
    oncancel: function() {
      console.warn('Cancelled!');
    }
  });
}
<link href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<button id="test">test</button>


您必须描述您的意思// do work here..。做功能YES TEXTNO TEXT去那里?
凯文

1
@kev,当用户选择确定按钮时将执行回调。
夏雄军

逻辑NO TEXT何去何从?
凯夫

您可以oncancel在的最后一个参数选项中添加一个选项 xdialog.confirm(text, onyes, options)。有关更多详细信息,请参见:xdialog默认选项
xia xiongjun

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

对不起,西班牙语?
zixuan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.