title: Show twitter bootstrap modal dialog automatically with knockout
body: <p>I need to show modal dialog for editing item in single page app when I select an item from list. </p>
  
  <p>Problem: I used <code>visible</code> binding, but that turned out to be cumbersome, and it does not work properly, as it shows only dialog, without overlay, and fade (if any) does not work.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h3 data-bind="text:name"&gt;&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;form data-bind="submit:deselectItem"&gt;
          &lt;!-- editor for item here --&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;a href="#" class="btn" data-bind="click:deselectItem"&gt;Close&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Model for this is simple object with observableList, obervable selectedItem, and deselectItem function which sets selectedItem to null.</p>