Twitter Bootstrap Modal opening multiple backdrops, glitch in Grails - grails

Question

Using Grails 2.2.1, Twitter Bootstrap plugin. I'm using modals and mine are set up with 3 exit approaches. Either hit the x button, click a close button, the save button, OR, click anywhere outside the modal to close.
The problem is, 2 backdrops are being opened whenever I attempt to open a single modal due to the function I'm using. Why is this? With the first 3 modal closing approaches, it closes the modal, and both backdrops. But with the final approach, it just closes the modal and a single backdrop.
Here's my gsp code*sec* part is just a taglib for a security plugin I'm using):
<div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="loginModalLabel">Login</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<div id="signupModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="signupModalLabel">Sign Up</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<g:link class="btn btn-primary">Create Account</g:link>
</div>
</div>
<sec:ifNotLoggedIn>
<g:javascript>
$('#loginModal').modal({
remote: "${createLink(controller:'login', action:'auth')}",
show: false
})
$('#signupModal').modal({
remote: "${createLink(controller:'user', action:'create')}",
show: false
})
</g:javascript>
<g:link fragment="loginModal" class="btn" data-toggle="modal">
Login
</g:link>
<br/>
<g:link fragment="signupModal" class="btn" data-toggle="modal">
Sign Up
</g:link>
</sec:ifNotLoggedIn>
I tried using:
$('#loginModal').modal({
remote: "${createLink(controller:'login', action:'auth')}",
show: false
})
$('#signupModal').modal({
remote: "${createLink(controller:'user', action:'create')}",
show: false
})
But I still get 2 backdrops opening when I click on a single modal link.
This seems to be a Grails issue, because I don't get this problem with jsFiddle: