CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialogtwitter-bootstrap-2
user1727053
user1727053

Reputation: 169

Bootstrap Modal Overlaps Menu

I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.

But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.

I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:

<script>
jQuery(document).ready(function() {
  jQuery('#subscribe').modal('hide') 
});
</script>

So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.

Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:

http://jackalopemedia.com/jasontreu

Appreciate any help!

Upvotes: 2

Views: 2059

Answers (2)

ravikant
ravikant

Reputation: 1

Compare Your Modal With This, If Your Code Match With This, It Should Be Working.

<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>

Upvotes: 0

Selvamani
Selvamani

Reputation: 7684

Ok I found the solution

You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.

So your line should be

<div id="subscribe" class="modal hide fade" role="dialog">

For more details visit bootstrap

Upvotes: 8

Related Questions