JSFiddle - React, Tailwind, and code Playground

by yiiBoy

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">&times;</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="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Event <a href="https://github.com/yiiBoy" class="pull-right"><span class="glyphicon glyphicon-user"></span> yiiBoy</a></h3>
        </div>
        <div class="panel-body text-center">
            <div class="form-group">
                <button type="button" class="btn btn-danger delete-event" data-dismiss="modal" data-url="#" data-confirmation="Are you sure you want to delete this event?" data-confirmation-title="Delete single event">Delete single event</button>
            </div>

            <div class="form-group">
                <button type="button" class="btn btn-danger delete-all-event" data-dismiss="modal" data-url="#" data-confirmation="Are you sure you want to delete all events?" data-confirmation-title="Delete entire series">Delete entire series</button>
            </div>
            
            <a href="#">http://github.com/yiiBoy</a>

        </div>
    </div>
</form>

CSS

form {
    width: 220px;
    margin: 10px;
}

JavaScript

showConfirmation = function(title, message, success, cancel) {
    title = title ? title : 'Are you sure?';
    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, .delete-all-event", function(event){
    event.preventDefault();
    var self = $(this);
    var url = $(this).data('url');
    var success = function(){
        alert('window.location.href=url');
    }
    var cancel = function(){
        alert('Cancel');
    };
    if (self.data('confirmation')) {
        var title = self.data('confirmation-title') ? self.data('confirmation-title') : undefined;
        var message = self.data('confirmation');
        showConfirmation(title, message, success, cancel);
    } else {
        success();
    }
});