javascript - How to use twitter bootstrap 3.1.1 modals - Stack Overflow

admin管理员组

文章数量:1429061

I've seen a lot of examples of modals. But they work perfectly only with bootstrap 2 ( css files) When I use it with bootstrap 3.1.1 css files . It doesn't works.

<div class="container">
    <h2>Example of creating Modals with Twitter Bootstrap</h2>
    <div id="example" class="modal hide fade in" style="display: none; ">
         <div class="modal-header">
             <a class="close" data-dismiss="modal">×</a>
             <h3>This is a Modal Heading</h3>
         </div>
         <div class="modal-body">
             <h4>Text in a modal</h4>
             <p>You can add some text here.</p>             
         </div>
         <div class="modal-footer">
             <a href="#" class="btn btn-success">Call to action</a>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
         </div>
    </div>
    <p>
        <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a>
    </p>
</div>

I've seen a lot of examples of modals. But they work perfectly only with bootstrap 2 ( css files) When I use it with bootstrap 3.1.1 css files . It doesn't works.

<div class="container">
    <h2>Example of creating Modals with Twitter Bootstrap</h2>
    <div id="example" class="modal hide fade in" style="display: none; ">
         <div class="modal-header">
             <a class="close" data-dismiss="modal">×</a>
             <h3>This is a Modal Heading</h3>
         </div>
         <div class="modal-body">
             <h4>Text in a modal</h4>
             <p>You can add some text here.</p>             
         </div>
         <div class="modal-footer">
             <a href="#" class="btn btn-success">Call to action</a>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
         </div>
    </div>
    <p>
        <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a>
    </p>
</div>

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Mar 12, 2014 at 0:16 Michael 4,01044 gold badges3232 silver badges4646 bronze badges asked Mar 12, 2014 at 0:12 Dj.SunriseDj.Sunrise 49355 gold badges1010 silver badges2323 bronze badges 5

• Go to bootstrap documentation under the modal section, include the bootstrap js & css then paste source code from the documentation. Modal is working fine in 3.x.x version. – Hendra Nucleo Commented Mar 12, 2014 at 0:14
• Already downloaded latest css,js files. It doesn't works.. – Dj.Sunrise Commented Mar 12, 2014 at 0:18
• Doesnt work is mean modal didnt show up? – Hendra Nucleo Commented Mar 12, 2014 at 0:22
• See the @JoshC answer with example below for all bootstrap version. – Hendra Nucleo Commented Mar 12, 2014 at 0:25
• sunrisetemplate.besaba. Check it on my web site. – Dj.Sunrise Commented Mar 12, 2014 at 0:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

According to Bootstrap 3 documentation, you need to structure your HTML like this:

EXAMPLE HERE

<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
             <a class="close" data-dismiss="modal">×</a>
             <h3>This is a Modal Heading</h3>
         </div>
         <div class="modal-body">
             <h4>Text in a modal</h4>
             <p>You can add some text here.</p>             
         </div>
         <div class="modal-footer">
             <a href="#" class="btn btn-success">Call to action</a>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
         </div>
        </div>
    </div>
</div>

You have missing and invalid CSS classes. Main problem is hide fade in.

Here is the js fiddle link.

<div class="container">
    <h2>Example of creating Modals with Twitter Bootstrap</h2>
    <div id="example" class="modal fade" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header"> 
                <a class="close" data-dismiss="modal">×</a>
                 <h3>This is a Modal Heading</h3>
            </div>
            <div class="modal-body">
                <h4>Text in a modal</h4>
                <p>You can add some text here.</p>
            </div>
            <div class="modal-footer"> 
                <a href="#" class="btn btn-success">Call to action</a>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
            </div>
        </div>
    </div>
    <p> <a data-toggle="modal" href="#example" 
     class="btn btn-primary btn-large">Launch demo modal</a>
    </p>
</div>

本文标签： javascriptHow to use twitter bootstrap 311 modalsStack Overflow