CODEWITHSUNDEEP
jqueryhtml
user2169710
user2169710

Reputation: 419

How to make a jQuery alert confirm box with "yes" and "no"

How can I make jQuery work with my HTML and CSS? I need when I click on the button and open an alert box in the centre with some text and options "yes" , "no" and when click yes to delete the text.

My code is here:

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

Demo

Upvotes: 5

Views: 116153

Answers (3)

Boniface Pereira
Boniface Pereira

Reputation: 308

This plugin can help you:

craftpip/jquery-confirm

It's easy to setup and has a great set of features.

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

Other than this, you can also load your content from a remote URL.

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

Upvotes: 6

Dwza
Dwza

Reputation: 6565

I won't write your code, but you are looking for something like a jQuery dialog

Take a look here

jQuery modal-confirmation

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

Upvotes: 8

pistou
pistou

Reputation: 2867

See the following snippet:

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

Upvotes: 35

Related Questions