Bootstrap modal dialog disallowing close

by Alessandro Vernet

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div class="xforms-login-detected-dialog modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <h4>Reloading form</h4>
    </div>
    <div class="modal-body">
        <p>This form has to be reloaded. This most likely happened because your session has expired, which might take to the login page. (If you think that you shouldn't see this message and that the problem persists, please contact support.)</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary">OK</button>
    </div>
</div>

JavaScript

var dialogEl = $('.xforms-login-detected-dialog');

// Link dialog with title for ARIA
var title = dialogEl.find('h4');
if (_.isUndefined(title.attr('id'))) {
    var titleId = _.uniqueId('xf-');
    title.attr('id', titleId);
    dialogEl.attr('aria-labelledby', titleId);
}

dialogEl.find('button').one('click.xf', function() {
    window.location.href = window.location.href;
});

// Show modal dialog
dialogEl.modal({
  backdrop: 'static', // Click on the background doesn't hide dialog
  keyboard: false     // Can't use esc to close the dialog
});