Combining modal with jsf command button

Combining modal with jsf command button

Previously I had been doing the following:
<div class="button-container">
<h:commandButton id="jsModal" value="Search"
action="#{searchFlightsBean.search}" styleClass="btn btn-warning btn-large
btn-block" onclick="location.href='#openModal'"></h:commandButton>
</div>
<div id="openModal" class="modalDialog">
<div>
<h4>Searching for flights</h4>
<p><strong>Pssst... It's just like being your own travel agent</strong></p>
<p>We are busy looking for available flights,<br/> This could take a
minute please be patient.</p>
</div>
</div>
This worked for what I intended it to do: Show a modal that informed the
user his page was loading, before navigating to said page. The problem is
that the modal would still be visible when navigating back to the page
using the "back" button, so I need to hid the modal the moment the page it
is on is no longer being viewd by the user.
Does anyone have any idea how to do it? I've tried a couple of ways, and
I've tried some of the examples on SO, but with no luck.