Bootstrap modal doesn't close with 'x' after opening a second time

Bootstrap modal doesn't close with 'x' after opening a second time

So I have this issue where after I open a modal, close it(by either
clicking the 'x' or the background overlay). The second time I open the
modal, it only closes by clicking on the background overlay and closing by
clicking on the 'x' does not work.
Below is my code for the modal:
<div class="modal fade in" id="whatModal" aria-hidden="true">
<div class="modal-content col-md-offset-4 col-md-4">
<div class="modal-header">
<div class="close glyphicon glyphicon-remove"
data-dismiss="modal" data-target="#whatModal"></div>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum feugiat dui ipsum, in laoreet eros
porttitor non.</p>
</div>
</div>
</div>
Oh, I'm using Bootstrap 3 by the way.
Any help is greatly appreciated after banging my head against the wall for
the past few hours.