Somebody know how to make jQuery works with my HTML and CSS. I need when I click on the button and open alert box in the centre with some text and options "yes" , "no" and when click yes to delete the text ? My code here:
<div class="text">Some text here
<a href="#" class="deleteMe">
<span class="delete-icon"> x Delete </span>
</a>
</div>
I won't write your code but what you looking for is something like a jquery dialog
take a look here
$(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>
See following snippet :
$(document).on("click", "a.deleteText", function() {_x000D_
if (confirm('Are you sure ?')) {_x000D_
$(this).prev('span.text').remove();_x000D_
}_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<div class="container">_x000D_
<span class="text">some text</span>_x000D_
<a href="#" class="deleteText"><span class="delete-icon"> x Delete </span></a>_x000D_
</div>
_x000D_
This plugin can help you,
Its easy to setup and has 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.
});
Source: Stackoverflow.com