JSFiddle - React, Tailwind, and code Playground

by jaibuu

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css">
<div id="modal-del-confirm" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
         <h3>Delete URL</h3>
    </div>
    <div class="modal-body">
        <p>You are about to delete one track url, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
        <p id="debug-url"></p>
    </div>
    <div class="modal-footer">
        <a href="delete.php?ref=" class="btn danger">Yes</a>
        <!-- <a href="delete.php?some=param&ref=" class="btn danger">Yes 2</a> -->
        <a href="javascript:$('#modal-del-confirm').modal('hide')" class="btn secondary">No</a>
    </div>
</div>

<a href="#" class="confirm-delete" data-id="23">Delete</a><br>
<a href="#" class="confirm-delete" data-id="54">Delete</a>

CSS

button {
    border: 1px #AAA solid;
    padding: 4px 10px;
}
.hide {
    display: none;
}

JavaScript

$('#modal-del-confirm').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');

    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
    
    $('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
})
.modal({backdrop: true});

$('.confirm-delete').on('click', function(e) {
    e.preventDefault();

    var id = $(this).data('id');
    $('#modal-del-confirm').data('id', id).modal('show');
});