如何使用jQuery制作一个带有“是”和“否”的警示确认框

Question

如何让jQuery与我的HTML和CSS配合使用？我需要当我点击按钮并打开一个带有一些文本和选项“是”、“否”的中心警报框时，当点击“是”时删除文本。

我的代码在这里：

<div class="text">Some text here
    <a href="#" class="deleteMe">
        <span class="delete-icon"> x Delete </span>
    </a>
</div>

Demo

---

- user2169710

---

1. 你没有添加代码。
2. 你的问题毫无意义。

- Rvervuurt

抱歉，我是新手，这里有代码.. http://jsfiddle.net/fyq6u6yd/12/ - user2169710

在Fiddle中没有JavaScript代码吗？ - Kartikeya Khosla

我询问如何做这件事，因为我不确定如何正确使用jQuery。 - user2169710

我问了一个知道如何做的人，我不是在向你询问我需要做什么的建议。如果您对答案不确定，请不要回复。 - user2169710

只需在互联网上搜索“jquery警告框教程”，您将获得大量结果。 - Peter Krebs

Answer 1

请提供需要翻译的内容，我会尽快为您完成翻译工作。

$(document).on("click", "a.deleteText", function() {
    if (confirm('Are you sure ?')) {
        $(this).prev('span.text').remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <span class="text">some text</span>
    <a href="#" class="deleteText"><span class="delete-icon"> x Delete </span></a>
</div>

- pistou

---

我认为那会很好用。谢谢，我会看一下你是如何编写它的细节。谢谢！ - user2169710

这个 confirm 实际上是 js 而不是 jq :P - Dwza

Answer 2

我不会为你编写代码，但你正在寻找类似于jQuery对话框的东西。

可以参考这里： jQuery模态确认框

$(function() {
    $("#dialog-confirm").dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $(this).dialog("close");
        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  });

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    These items will be permanently deleted and cannot be recovered. Are you sure?
  </p>
</div>

- Dwza

Answer 3

这个插件可以帮助你：

craftpip/jquery-confirm

它易于设置，并且具有出色的功能集合。

$.confirm({
    title: 'Confirm!',
    content: 'Simple confirm!',
    buttons: {
        confirm: function () {
            $.alert('Confirmed!');
        },
        cancel: function () {
            $.alert('Canceled!');
        },
        somethingElse: {
            text: 'Something else',
            btnClass: 'btn-blue',
            keys: ['enter', 'shift'], // trigger when enter or shift is pressed
            action: function(){
                $.alert('Something else?');
            }
        }
    }
});

除此之外，你还可以从远程URL加载你的内容。

$.confirm({
    content: 'url:hugedata.html' // location of your hugedata.html.
});

- Boniface Pereira