jump to navigation

bootstrap confirm dialog

CSS (in a bootstrap_PATCH.css file):

.confirmationDialog {
    border-width: 3px;
    background-color: #feb;
.confirmationDialog .modal-header {
    border: none;
    padding: 0;
.confirmationDialog .modal-header .close {
    width: 20px;
    height: 20px;
    margin: 6px 8px 0 0;
    padding: 0;
    color: #700;
    border: 1px solid #700;
    text-align: center;
    vertical-align: middle;
    /* text-shadow: none; */
    opacity: .9;
    filter: alpha(opacity=90);
    background-color: #dcc;
.confirmationDialog .modal-header .close:hover {
    color: #b00;
    background-color: #ebb;
.confirmationDialog .modal-body {
    padding-bottom: 0;
    border: none;
.confirmationDialog .modal-footer {
    text-align: center;
    padding: 6px;
    border-width: 0;
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
.confirmationDialog .modal-footer .btn {
    margin: 0 24px;

JS Definitions (in a separate JS file includes in the doc head):

function eqrUtil_launchConfirm(msg,handler) {
    $('#confirmModal .modal-body').html(msg);
    $('#confirmModal #confirm-yes').focus();
var GLOBAL_confirmHandlerData = -1;

// NOTE: could put this directly in the HTML or in a footer file or some such, but doing it here consolidates the code
$(document).ready(function () {
    $('body').append('<div id="confirmModal" class="modal hide confirmationDialog" data-backdrop="false">' +
        '<div class="modal-header"><a href="#" class="close" data-dismiss="modal">×</a><h3 class="confirmationTitle"></h3></div>' +
        '<div class="modal-body"></div>' +
        '<div class="modal-footer">' +
        '<input type="button" id="confirm-yes" class="btn btn-danger" data-dismiss="modal" value="Yes"/>' +
        '<input type="button" id="confirm-no" class="btn btn-cancel" data-dismiss="modal" value="No"/>' +
        '</div>' +

Example Usage (in-line or in a separate JS file):

<script type="text/javascript">
    $(document).ready(function () {
        $("#deleteScheduleBtn").click(function () {
            GLOBAL_confirmHandlerData= $(this).attr('data-for-schedule');
            eqrUtil_launchConfirm("<p>Are you sure you want to delete this entire schedule of reservations?</p>",handleDeleteSchedule);
        function handleDeleteSchedule() {
            alert('TODO: implement delete entire schedule '+GLOBAL_confirmHandlerData);
            // TODO: make the ajax call
            // on success, head to acct mgt page by default, or sched_origin_page if that value is present


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: