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    lt div class  modal  id  myModal  gt   lt div class  modal-header  gt   lt button class  close  data-dismiss  modal  gt    lt  button gt   lt h3 gt Modal header lt  h3 gt   lt  div gt   lt div class  modal-body  gt   lt p gt One fine body    lt  p gt   lt  div gt   lt div class  modal-footer  gt   lt a href     class  btn  gt Close lt  a gt   lt a href     class  btn btn-primary  gt Save changes lt  a gt   lt  div gt   lt  div gt    I have either this    lt a class  btn  data-controls-modal  myModal  gt Launch Modal lt  a gt    or this     lt a class  btn  data-toggle  modal  href   myModal   gt Launch Modal lt  a gt    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

User · Answer

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    lt a class  btn  data-toggle  modal  href   myModal  gt Launch Modal lt  a gt     lt div class  modal hide  id  myModal  gt  lt  -- note the use of  hide  class -- gt     lt div class  modal-header  gt       lt button class  close  data-dismiss  modal  gt    lt  button gt       lt h3 gt Modal header lt  h3 gt     lt  div gt     lt div class  modal-body  gt       lt p gt One fine body    lt  p gt     lt  div gt     lt div class  modal-footer  gt       lt a href     class  btn  data-dismiss  modal  gt Close lt  a gt  lt  -- note the use of  data-dismiss  -- gt       lt a href     class  btn btn-primary  gt Save changes lt  a gt     lt  div gt   lt  div gt       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

User · Answer

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

User · Answer

I finally found this solution from  Sven  and solved the problem  what I did was I included  bootstrap min js  with    lt script src  bootstrap min js   gt    instead of    lt script src  bootstrap min js  gt  lt  script gt    and it fixed the problem which looked really odd  can anyone explain why

User · Answer

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

User · Answer

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

User · Answer

Also   If you re running your page from Visual Studio and have installed the bootstrap package you need to make sure of two things   That you ve also gotten the Bootsrap Modal Dialog package  very important  You ve added it to bundle config if you re using bundling

User · Answer

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

User · Answer

Try skipping the p tag or replace it with a h3 tag or similar  Replace    lt p gt One fine body    lt  p gt   with   lt h3 gt One fine body    lt  h3 gt   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

User · Answer

lt div class  modal fade bs-example-modal-lg  id     modal   cartModal index    gt     lt div class  modal-dialog modal-lg  role  document  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal   aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt         lt  div gt         lt div class  modal-body  gt             lt div class  col-lg-6   gt               lt p class  prodTitle  ng-bind   cartModal product p name uppercase   gt  lt  p gt               lt p class  price-para  gt                 lt span class  currency-cls  ng-bind  cartModal product c currency  gt  lt  span gt                 lt span class  price-cls  ng-bind  cartModal product p price  gt  lt  span gt               lt  p gt               lt p class  select-color  gt                 lt span ng-repeat  color in cartModal product p available options colors  gt                   lt button id  color-style  ng-click  cartModal saveColor color   ng-style    background-color  color hexcode   gt  lt  button gt                 lt  span gt               lt  p gt               lt br gt               lt p class  select-box  gt                 lt span class  size-select-cls  gt                  SIZE  lt 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  gt  lt  select gt                 lt  span gt                 lt span class  qty  gt                  QTY  lt input type  number   min  1  ng-model  cartModal selectedQty   gt                 lt  span gt               lt  p gt               lt p class  edit-button  gt                 lt button class  btn-primary btn-lg  data-dismiss  modal  ng-click  cartModal save   cartModal calculate    gt EDIT lt  button gt               lt  p gt             lt  div gt             lt div class  col-lg-6  gt               lt img ng-src    cartModal product imageSrc    gt             lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

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

User · Answer

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  lt b gt   result   lt  b gt                                             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

User · Answer

A simple way to use modals is with eModal   Ex from github    Link to eModal js  lt script src    rawgit com saribe eModal master dist eModal min js  gt  lt  script gt  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

User · Answer

A better solution is to load a twisted version of bootstrap js without jquery  Get it from http   daniemon com blog bootstrap-without-jquery    lt script src      bootstrap-without-jquery min js  gt  lt  script gt    Going this way will save you trouble from script tags

[javascript] Can not get a simple bootstrap modal to work

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

[javascript] Can not get a simple bootstrap modal to work

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog