JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

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-from-dom" 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>
    </div>
    <div class="modal-footer">
      <a href="delete.php?ref=" class="btn danger">Yes</a>
      <a href="javascript:$('#modal-from-dom').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-from-dom').bind('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger'),
        href = removeBtn.attr('href');

    removeBtn.attr('href', href.replace(/&ref=\d*/, '&ref=' + id));
})
.modal({ backdrop: true });

$('.confirm-delete').click(function(e) {
    e.preventDefault();
    
    var id = $(this).data('id');
    $('#modal-from-dom').data('id', id).modal('show');
});