CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Vicky
Vicky

Reputation: 982

bootstrap modal is coming up properly but not showing the content in it properly?

I am designing a website where i have put the modal for signup that when the user click on signup button the modal will came up but here in my website modal is working properly but content in it is not clickable please help me out.Here is my coding.

<li><a href="#show" id="showup">signup</a></li>
                    <div class="modal hide fade" id="show">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h1>Tittle</h1>
                        </div>
                        <div class="modal-body">
                                <p>The modal Body</p>
                        </div>
                        <div class="modal-footer">
                                <a href="" class="btn">Close</a>
                        </div>    
                     </div>

And the java script i have written for it is here.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
 <script type="text/javascript">
 $("#showup").click(function(){
    $("#show").modal();
    });
 </script>

The screenshots of modal will be helpful for understanding me. The modal appers like that

Upvotes: 5

Views: 7832

Answers (2)

AhmedBinNasser
AhmedBinNasser

Reputation: 2732

These are good login modal example, you can see them to see how they were written :

use anyone of them the normal way you put your modal please see this see this link for more explanation: modal

i hope they will help you.

Upvotes: 1

Felix
Felix

Reputation: 38102

Try to use something like:

.modal {
    z-index: 10000;
}

It's probably because the z-index of your modal is lower than the z-index of other element. So try to use firebug or chrome inspector tools to figure it out

Upvotes: 0

Related Questions