Bootstrap modal not displaying

Question

I ve copied and pasted the example code from twitter bootstrap to create a basic modal window in my Rails 3 2 app    lt  -- Modal -- gt   lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt       lt h3 id  myModalLabel  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 button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt button class  btn btn-primary  gt Save changes lt  button gt     lt  div gt   lt  div gt    lt a href    myModal   role  button  class  btn  data-toggle  modal  gt Launch demo modal lt  a gt    It s not working   It s not because of jQuery or scripts not loading because a  it doesn t need to load any js because its using data targeting and b  I ve checked the console and everything is firing perfectly   It s also not because I m including both boostrap js and bootstrap-modal js   I ve checked and I m not   I m at a loss   It should just work   Other bootstrap js is working fine on the site   The only thing I can think of is it s something to do with the definition of the classes  hide and  fade - when I take them out  the modal shows up fine   When I include them  it won t show up at all   Could jQuery UI be interfering with it   Please ask me for any further info you might need to help me     UPDATE   So I think I see the problem  but I don t know how to fix it   When I check the console  right at the top I see that   element style   display  none      is somehow now part of the div  so in the console it looks like this    lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  style  display  none    gt    But I don t know why it is adding it in  or where from   How can I track this down   Thanks

User · Answer

Change you Code To something like this   x000D   x000D   lt  -- Modal -- gt   lt div id  myModal  class  modal fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt       lt h3 id  myModalLabel  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 button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt button class  btn btn-primary  gt Save changes lt  button gt     lt  div gt   lt  div gt    lt a class  btn  data-target   myModel  role  button  data-toggle  modal  gt Launch demo modal lt  a gt  x000D   x000D   x000D   and try using data-target  quot  ModelId quot  once  maybe it s the possible causing the issue  Second  if you have included JQuery more then one time  remove it and include it once only  It also prevents the model sometimes

User · Answer

If you are using angular and trying to create a directive that has a custom modal in it  the modal backdrop will show but the modal itself will not unless you set replace  true on your directive   Typescript Directive   export class myModalDirective implements ng IDirective       static Register        gt            angular module  app   directive  myModal        gt    return new myModalDirective                  templateUrl    mymodal html      restrict    E       replace   true      scope             show                link    scope  any  element  ng IAugmentedJQuery  attrs  ng IAttributes  ctrl  any    gt            var vm   this          scope  watch function      return scope show     function  vis                if  vis                      element  modal  show                  else                     element  modal  hide                                         constructor                Modal HTML   lt div class  modal fade  data-keyboard  false  data-backdrop  static  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt h4 class  modal-title  gt Modal Title lt  h4 gt                   lt  div gt                   lt div class  modal-body  gt                   lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

if you are using custom CSS instead of defining modal class as  modal fade  or  modal fade in  change it to only  modal  in HTML page then try again

User · Answer

Just to elaborate on  jfdimark answer  It was most likely to cause due to same css class name somewhere in loaded CSS  Therefore  instead of defining modal class as  modal fade   change it to  modal fade in  then try again

User · Answer

Check for all js files  the order should be maintained  The order should be maintained as        - gt  jquery min js     - gt  bootstrap min js     - gt  any external js files

User · Answer

If you re running Bootstrap 4  it may be due to   fade not  show    opacity  0    in the Bootstrap css and your modal doesn t have class  show   And the reason it doesn t have class  show  may be due to your page not loading jQuery  Popper  and Bootstrap Javascript files    The Bootstrap Javascript will add the class  show  to your dialog automagically    Reference  https   getbootstrap com docs 4 3 getting-started introduction

User · Answer

It s a good idea to place your modal after the  tag  so you are sure no parent element style affects it - in my case modal was hidden because parent div was hidden

User · Answer

Maybe a very rare scenario but I can t add a comment so leaving this here in case it helps someone  I had a similar issue dealing with someone else s code  modal wasn t displaying when I added  quot  fade quot  class  issue was some CSS for  modal-backdrop   modal-backdrop  display  none    After removing that  modal shows up fine

User · Answer

I had the same problem    Solution  I put modal s DIV in the uppermost scope of main HTML  due to using Jinja2  blocks my modal got nested somewhere in the middle of some other DIV

User · Answer

I just came across this issue  and found custom CSS style sheet text  color  ffffff  is submerging the text content  because model background color is same  i e   model-content  background-color  ffffff    Make sure to override it in your custom style sheet by adding the following   modal-content color  646464  important   May be this helps

User · Answer

You are supposed to import jquery and bootstrap min js   Add this to angular-cli    scripts        node modules jquery dist jquery min js               node modules bootstrap dist js bootstrap min js     make sure you have its folders

User · Answer

If you ve upgraded from Bootstrap 2 3 2 to Bootstrap 3 then you ll need to remove the  hide  class from any of your modal divs

User · Answer

I had the same issue and I realized that my  lt button gt had a type  submit when Bootstrap states that it needs to be type  button

User · Answer

As Paula  I had the same problem  my modal was not showing  and I realized that my button was in a   lt  form    tag         lt button class  btn btn-danger  data-toggle  modal  data-target   deleteItemModal  gt Delete lt  button gt    I just replaced  lt  button   by  lt  a    and my modal worked well   lt a class  btn btn-danger  data-toggle  modal  data-target   deleteItemModal  gt Delete lt  a gt

User · Answer

In order to get my modal to display when calling  modal  show    I changed   modal on  loaded bs modal   function      to   modal on  shown bs modal   function

User · Answer

Sometimes other css conflicts as well - CSS priority issue   to check  Go to your modal fade class on browser and then check if there is any custom file comes on top  such as  fade not  show  where it was using its own information not the bootstrap  if you find then you have to change it to your needs   Hope this helps

User · Answer

I tracked down the reason   Just to give it some general usefulness to anyone coming to this question   If you can t figure out what s wrong  try doing a  search all  for any classes of  modal   fade   fade in  and  hide  in any style sheets in your application   I had a single instance of  fade  being defined in a random css file  and that s what was stopping it displaying as it was overriding bootstrap   Once I deleted the reference  everything was ok

User · Answer

I m using ui-bootstrap-tpls js and what worked for me is that I searched in the whole project for fade and found 3 places where this was being set in the mentioned file  I went through the find results and saw that 2 of the changes were being done on the modal and the other one was being set on the tool tip animation  Note the difference in below code  uib-modal-animation-class    fade   tooltip-animation-class  quot fade quot    What I did to solve the issue was to add the show class for the uib-modal  uib-modal-animation-class    fade show

User · Answer

I had my modal  lt  div   inside my  lt  li       not good   Outside works fine  -    lt div class  modal fade  id  confirm-logout  tabindex  -1  role  dialog  aria-labelledby  logoutLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt                   lt h4 class  modal-title  id  myModalLabel  gt      lt  h4 gt               lt  div gt                lt div class  modal-body  gt                   lt p gt      lt  p gt               lt  div gt                lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt                   lt a class  btn btn-danger btn-ok  gt OK lt  a gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   lt li gt             lt  li gt

User · Answer

After encountering this I was surprised to find that none of these solutions worked  as it seems fairly straight forward and I had similar markup working on a different page   With my configuration  I had existing jQuery code bound to the same selector triggering the modal  Once starting the process of elimination  all I had to do was comment remove e stopPropagation   within my existing script

User · Answer

Delete the data-target attribute from button type  Then add onClick  quot     your modal name   modal  show   quot  in the button tag  I hope it will work as I faced the same problem  amp  I fixed the issue by calling the show class of modal via jQuery

[twitter-bootstrap] Bootstrap modal not displaying

Examples related to twitter-bootstrap

[twitter-bootstrap] Bootstrap modal not displaying

Examples related to twitter-bootstrap

Examples related to modal-dialog