Bootstrap 3.0 Modal

Question

I am stuck. Given Bootstrap 3.0 is about to be released, I decided to go with it for a new project. Things are going fine so far, but for the life of me, I can't figure out how to do a Modal Dialog in Bootstrap 3.0.

Does anyone have a simple example?

There is info on the Bootstrap 3 modal here: https://github.com/twitter/bootstrap/pull/6342 -- But it should basically work the same as the 2.x modal. What have you tried so far? — Carol Skelly, Jul 10 '13 at 16:31
Here is a working demo http://www.bootply.com/67046 for the BS3 modal — Carol Skelly, Jul 11 '13 at 01:48

score 57 · Accepted Answer · edited May 23 '17 at 11:45

You could try to build the docs: Compile Twitter bootstrap 3 docs (How to)? so also http://bassjobsen.weblogs.fm/explore-and-install-twitter-bootstrap-3/ from the docs:

  <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

This worked. Simple. Not sure what I was doing wrong. I just ripped everything out and started fresh with this. Thanks! — Eric, Jul 11 '13 at 22:24
I'm having a problem with the modal too, and I'm cropping right from the demo on the website. Press the "Launch dmeo modal link in the title bar. http://jsfiddle.net/RMgZV/2/ — andyczerwonka, Oct 02 '13 at 18:09
@andyczerwonka copy the html of your modal to somewhere not inside the navbar. See: http://jsfiddle.net/kcS2N/1/ — Bass Jobsen, Oct 02 '13 at 18:16

score 1 · Answer 2 · answered Sep 12 '14 at 12:07

1

I've found a very well example that as well let you download a zip with all the code examples about Booststrap 3 Modal.

I hope this help you as well!

answered Sep 12 '14 at 12:07

Joe

7,749
19
60
110

score 0 · Answer 3 · edited Feb 07 '15 at 16:24

I've been fighting against the same problem and thanks to this conversation I found my mistake. While using TwitterBootstrap3, you need the following things:

A button trigger

<a data-toggle="modal"
   href="#myModal"
   class="btn btn-primary btn-lg"
>Launch demo modal</a>

An a div with this minimun structure:

<div class="modal fade"
     id="myModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- blah blah content here -->
       </div>
   </div>
</div>

It is important to know that if you don't place modal-dialog and model-content, the modal window will not be opened properly

score 0 · Answer 4 · answered Jul 26 '18 at 07:42

0

You can try simpleDialog. This is a simple bootstrap modal with callbacks and template injection options.

answered Jul 26 '18 at 07:42

Jithin Vijayan

307
5
19

2

Welcome to Stack Overflow! While links are great way of sharing knowledge, they won't really answer the question if they get broken in the future. Add to your answer the essential content of the link which answers the question. In case the content is too complex or too big to fit here, describe the general idea of the proposed solution. Remember to always keep a link reference to the original solution's website. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – sɐunıɔןɐqɐp Jul 26 '18 at 08:03

Bootstrap 3.0 Modal

4 Answers4

Linked