JSFiddle - React, Tailwind, and code Playground

by Rodolpho Brock

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.3.0/bootbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
    <div class="panel panel-success">
         <div class="panel-heading">Modal Confirmation</div>
        <div class="panel-body">
            <div class="container">
            <div class="row">
                <div class="col-xs-2"><a class="btn btn-xs btn-default" data-toggle="confirm" data-title="Do you really want to delete the record 123?" href="/Controller/Delete/123"><span class="fa fa-remove"> 123</span> </a></div>    
                <div class="col-xs-10">123 - Example with link and title 123</div>    
            </div>    
            <div class="row">
                <div class="col-xs-2"><a class="btn btn-xs btn-default" data-toggle="confirm" href="/Controller/Delete/234"><span class="fa fa-remove"></span> 234</a></div>    
                <div class="col-xs-10">234 - Example with link and without title</div>    
            </div>    
            <div class="row">
                <div class="col-xs-2"><button class="btn btn-xs btn-default" data-toggle="confirm" data-title="Do you really want to delete the record 345?" href="/Controller/Delete/345"><span class="fa fa-remove"></span> 345</button></div>    
                <div class="col-xs-10">345 - Example with button and title</div>    
            </div>    
            <div class="row">
                <div class="col-xs-2"><button class="btn btn-xs btn-default" data-toggle="confirm" href="/Controller/Delete/567"><span class="fa fa-remove"></span> 567</button></div>    
                <div class="col-xs-10">567 - Example with button and without title</div>    
            </div>
      ...

JavaScript

$(document).on("click", "[data-toggle=\"confirm\"]", function (e) {
        e.preventDefault();
        var lHref = $(this).attr('href');
        var lText = this.attributes.getNamedItem("data-title") ? this.attributes.getNamedItem("data-title").value : "Are you sure?"; // If data-title is not set use default text
        bootbox.confirm(lText, function (confirmed) {
            if (confirmed) {
                //window.location.replace(lHref); // similar behavior as an HTTP redirect (DOESN'T increment browser history)
                window.location.href = lHref; // similar behavior as clicking on a link (Increments browser history)
            }
        });
    });