2

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>
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. Mar 12, 2014 at 0:14
  • Already downloaded latest css,js files. It doesn't works..
    – Dj.Sunrise
    Mar 12, 2014 at 0:18
  • Doesnt work is mean modal didnt show up? Mar 12, 2014 at 0:22
  • See the @JoshC answer with example below for all bootstrap version. Mar 12, 2014 at 0:25
  • sunrisetemplate.besaba.com Check it on my web site.
    – Dj.Sunrise
    Mar 12, 2014 at 0:25

2 Answers 2

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>
4
  • So you got what point you have missing for trigger the modal on clicked? Mar 12, 2014 at 0:26
  • Sorry could you help me? I have a new problem. Backdrop over modal. I can't click nowhere
    – Dj.Sunrise
    Mar 12, 2014 at 0:29
  • 1
    @Dj.Sunrise If it's something small, I can answer it quickly, otherwise you will need to open up another question. Mar 12, 2014 at 0:33
  • 1
    @Dj.Sunrise Give .modal a higher z-index value.. .modal { z-index:9999 } should work.. Mar 12, 2014 at 0:37
2

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>
1
  • The use of the ID element was useful, this way I can have multiple modals on one page.
    – HappyCoder
    May 18, 2015 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.