javascript - bootstrap modal is coming up properly but not showing the content in it properly? - Stack Overflow

admin管理员组

文章数量:1026390

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=".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.

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./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.

• javascript
• css
• twitter-bootstrap

Share Improve this question Follow asked Jan 13, 2014 at 14:08 VickyVicky 98222 gold badges1111 silver badges3030 bronze badges 2

• Where are you getting the bootstrap CSS from? – iambriansreed Commented Jan 13, 2014 at 14:33
• This problem occurred on me when i had an open div tag and was missing the closing tag. So people be careful on your html formatting – csandreas1 Commented May 12, 2018 at 23:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

• Modal with tabbed content
• Login form in a modal

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.

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

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=".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.

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./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.

• javascript
• css
• twitter-bootstrap

Share Improve this question Follow asked Jan 13, 2014 at 14:08 VickyVicky 98222 gold badges1111 silver badges3030 bronze badges 2

• Where are you getting the bootstrap CSS from? – iambriansreed Commented Jan 13, 2014 at 14:33
• This problem occurred on me when i had an open div tag and was missing the closing tag. So people be careful on your html formatting – csandreas1 Commented May 12, 2018 at 23:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

• Modal with tabbed content
• Login form in a modal

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.

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

本文标签： javascriptbootstrap modal is coming up properly but not showing the content in it properlyStack Overflow