JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="main_confirmation" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<form>
<div class="form-group">
<button type="button" class="btn btn-danger delete-event" data-url="#"
data-message="Are you sure you want to delete this event?">Delete</button>
</div>
</form>
CSS
form {
width: 220px;
margin: 10px;
}
JavaScript
showConfirmation = function(message, success, cancel) {
title : 'Alerta EMLAZE';
var modal = $("#main_confirmation");
modal.find(".modal-title").html(title).end()
.find(".modal-body").html(message).end()
.modal({ backdrop: 'static', keyboard: false })
.on('hidden.bs.modal', function () {
modal.unbind();
});
if (success) {
modal.one('click', '.modal-footer .btn-primary', success);
}
if (cancel) {
modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
}
};
$(document).on("click", ".delete-event", function(event){
alert("hola mundo");
event.preventDefault();
var ventana = $(this);
var url = $(this).data('url');
var success = function(){
alert('ha sido eliminado');
}
var cancel = function(){
alert('no ha sido eliminado');
};
if (ventana.data('message')) {
var message = ventana.data('message');
showConfirmation(message, success, cancel);
}
});