Necesito mostrar un cuadro de diálogo modal para editar un elemento en la aplicación de una sola página cuando selecciono un elemento de la lista.

Problema: utilicévisible vinculante, pero resultó ser engorroso, y no funciona correctamente, ya que solo muestra el diálogo, sin superposición, y el desvanecimiento (si lo hay) no funciona.

HTML:

<div class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 data-bind="text:name"></h3>
  </div>
  <div class="modal-body">
    <form data-bind="submit:deselectItem">
        <!-- editor for item here -->
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-bind="click:deselectItem">Close</a>
  </div>
</div>

El modelo para esto es un objeto simple con observableList, obervable selectedItem y deselectItem, que establece el elemento seleccionado en nulo.