31

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?

3
  • what js scripts are you including in your header and in which order? Commented May 12, 2012 at 13:29
  • I included js scripts before body tag rather than in the header, in the order like: <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.7.0/… type="text/javascript" src="/scripts/myApp.js"></script>,<script src="/scripts/bootstrap-modal.js"></script>, is that ok? thanks.
    – cnherald
    Commented May 13, 2012 at 8:11
  • If I tried the modal example on the "mainpage.html" with url is "/", it works fine just as the example on the official doc and your response. but when I loaded the same modal example onto a html page with url is "/nextpage", it then didn't work at all, unless I used a javascript line to handle the click event, any idea?
    – cnherald
    Commented May 13, 2012 at 8:15

13 Answers 13

27

I finally found this solution from "Sven" and solved the problem. what I did was I included "bootstrap.min.js" with:

<script src="bootstrap.min.js"/>

instead of:

<script src="bootstrap.min.js"></script>

and it fixed the problem which looked really odd. can anyone explain why?

3
  • 15
    That's (unfortunately) how script tags work - they can't be self closing. It's unrelated to Bootstrap. Commented Jun 15, 2012 at 12:55
  • 2
    would you explain more?
    – omid.n
    Commented Feb 12, 2014 at 15:46
  • you can't use /> at the end of the opening script tag to close it in a single tag. it needs separate opening and closing tags Commented Apr 7, 2015 at 6:11
24

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.

4
  • 1
    He is using the official docs, just the ones in the distro package, not the canonical site. Even on the canonical site, look at the next paragraph and you'll see the content about markup that the OP is talking about. Commented May 12, 2012 at 4:07
  • @nrabinowitz - thanks much; I'll revise my original response.
    – mg1075
    Commented May 12, 2012 at 4:38
  • thanks nrabinowitz, if I tried the modal example on the "mainpage.html" with url is "/", it works fine just as the example on the official doc and your response. but when I loaded the same modal example onto a html page with url is "/nextpage", it then doesn't work at all, unless I used a javascript line to handle the click event, any idea?
    – cnherald
    Commented May 12, 2012 at 9:53
  • is there anything to do with the path of the html (url)? in my case, mainpage.html(url is "/") and nextpage.html(url is "/nextpage") are in the same folder.
    – cnherald
    Commented May 12, 2012 at 10:00
17
+250

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..."
}]);
0
11

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)"

1
  • 2
    This solved my issue.. I was looking for good fix for my case. Thanks Anto Commented Jun 22, 2017 at 5:44
5

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.

1
  • Hi tofs thank you for the answer, pleas refer to my own solution.
    – cnherald
    Commented May 17, 2012 at 10:13
1

For me the bootstrap modal was showing and disappearing when I clicked the button tag (in the markup the modal is shown and hidden using data attributes alone). In my gulpfile.js I added the bootstrap.js (which had the modal logic) and the modal.js file. So I think after the browser parses and executes both the files, two click event handlers are attached to the particular dom element (one for each of the files), so one shows the modal the other hides the modal. Hope this helps someone.

0

Try skipping the p tag or replace it with a h3 tag or similar. Replace:

<p>One fine body…</p>

with

<h3>One fine body…</h3>

It worked for me, I don't know why, but it seems the p tag is somehow not fully compatible with some versions of Bootstrap.

1
  • The html body content in the modal window will not affect the modal from working unless it contained invalid javascript.
    – brenjt
    Commented Dec 16, 2012 at 21:48
0

A better solution is to load a twisted version of bootstrap.js without jquery. Get it from http://daniemon.com/blog/bootstrap-without-jquery/

<script src=".../bootstrap-without-jquery.min.js"></script>

Going this way will save you trouble from script tags.

0

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

I was having this same problem using Angular CLI. I needed to import the bootstrap.js.min file in the .angular-cli.json file:

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
-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!');
    
1
  • 1
    This doesn't answer the question. You also should mention you are self advertising. Commented Aug 30, 2016 at 18:29
-1

You must call your Bootstrap jQuery plugin so that it will trigger.

2
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.
    – LeftyX
    Commented Oct 3, 2015 at 9:51
  • @LeftyX How is this not an answer? Sure, it is short, but it is still an answer.
    – Anders
    Commented Oct 3, 2015 at 10:14
-1
<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
          <div class="col-lg-6" >
            <p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
            <p class="price-para">
              <span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
              <span class="price-cls" ng-bind="cartModal.product.p_price"></span>
            </p>
            <p class="select-color">
              <span ng-repeat="color in cartModal.product.p_available_options.colors">
                <button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
              </span>
            </p>
            <br>
            <p class="select-box">
              <span class="size-select-cls">
                SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
                item.name for item in items"></select>
              </span>
              <span class="qty">
                QTY:<input type="number"  min="1" ng-model="cartModal.selectedQty"/>
              </span>
            </p>
            <p class="edit-button">
              <button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
            </p>
          </div>
          <div class="col-lg-6">
            <img ng-src="{{cartModal.product.imageSrc}}">
          </div>
      </div>
    </div>
  </div>
</div>

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.