Cerrar Modo Bootstrap

Tengo un cuadro de diálogo modal de bootstrap que quiero mostrar inicialmente, luego cuando el usuario hace clic en la página, desaparece. Tengo lo siguiente:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

El modal se muestra inicialmente, pero no se cierra cuando se hace clic fuera del modal. Además, el área de contenido no está en gris.. ¿Cómo puedo hacer que el modal se muestre inicialmente y luego se cierre después de que el usuario haga clic fuera del área? ¿Y cómo puedo conseguir que el fondo sea gris como en la demo?