JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<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 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; !important}

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');
});