Unable to dismiss Modal windows when vistors.error object has errors in it.

[exawatt]

PROBLEM: When the modal window is initially displayed, the user is asked to select a favorite and enter a comment. If the user enters nothing in and clicks the Choose button, an error message appears, as it should. However, at this point, the user cannot dismiss the modal window by clicking the Close button or the X. The modal window stays regardless.

I think this is because of <div id="modal-form" class="modal" style="display: <%= @visitor.errors.any? ? 'block' : 'none';%>">. At this point the visitor.errors object still evaluates to true and show the div style is set to as a block instead of none.

I think that the div style should be reset to none when the user clicks the x or the close button and the visitor.errors object cleared.

[exawatt]

For now, I've just fixed it with this code, which explicitly sets the href attribute:

        <div class="modal-header">
          <a class="close" data-dismiss="modal" href=".">&#215;</a>
          <h3>Select a Favorite</h3>
        </div>
        ...
        ...
        <div class="modal-footer">
          <input class="btn btn-primary" name="commit" type="submit" value="Choose!" />
          <a class="btn" data-dismiss="modal" href=".">Close</a>
        </div>

But is there a proper solution?