Bootstrap Modal error

Triggering a modal show twice, the backdrop remains shown.

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
              <a href="#" class="close">×</a>
              <h3>Modal Heading</h3>
            </div>
            <div class="modal-body">
              <p>One fine body…</p>
            </div>
            <div class="modal-footer">
              <a href="#" class="btn primary">Primary</a>
              <a href="#" class="btn secondary">Secondary</a>
            </div>
          </div>
<button id="button" class="btn error">bug</button>

JavaScript

var $modal = $('#modal-from-dom');
$modal.modal({backdrop: true, keyboard: true, show: false});

$('#button').click(function(event) {
    event.preventDefault();
    
    // Showing twice
    $modal.modal('show');
    $modal.modal('show');
});