Can not get a simple bootstrap modal to work

Question

I am trying to get a simple bootstrap's modal sample to work, I follow this document which says " You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, ...", but I have done whatever I could and had a huge amount of research still can not get this simple modal to work.

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

I have either this:

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

or this:

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

button to activate the modal, I have loaded the bootstrap-modal.js on the page as well. Unless I added a javascript line to handle the "Launch Modal" click event, when I click on "Launch Modal", nothing happens at all, are there anything that I have missed?

Answer 1

A simple way to use modals is with eModal!

Ex from github:

1. Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

2. use eModal to display a modal for alert, ajax, prompt or confirm

   // Display an alert modal with default title (Attention)
   eModal.alert('You shall not pass!');
   

Answer 2

Fiddle 1: a replica of the modal used on the twitter bootstrap site. (This is the modal that doesn't display by default, but that launches when you click on the demo button.)

http://jsfiddle.net/9RcDN/

---

Fiddle 2: a replica of the modal described in the bootstrap documentation, but that incorporates the necessary elements to avoid the use of any javascript. Note especially the inclusion of the hide class on #myModal div, and the use of data-dismiss="modal" on the Close button.

http://jsfiddle.net/aPDVM/4/

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


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

---

It's also worth noting that the site you are using is running on bootstrap 2.0, while the official twitter bootstrap site is on 2.0.3.

Answer 3

Also have a look at BootBox, it's really simple to show alerts and confirm boxes in a bootstrap modal. http://bootboxjs.com/

The implementation is as easy as this:

Normal alert:

bootbox.alert("Hello world!");

Confirm:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
}); 

Promt:

bootbox.prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

And even custom:

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);

Answer 4

Also,

If you're running your page from Visual Studio and have installed the bootstrap package you need to make sure of two things

1. That you've also gotten the Bootsrap Modal Dialog package (very important)
2. You've added it to bundle.config if you're using bundling.

Answer 5

I had an issue with Modals as well. I should have declare jquery.min.js before bootstrap.min.js (in my layout page). From official site : "all plugins depend on jQuery (this means jQuery must be included before the plugin files)"

Answer 6

I run into this issue too. I was including bootstrap.js AND bootstrap-modal.js. If you already have bootstrap.js, you don't need to include popover.