Bootstrap modal appearing under background

Question

I have used the code for my modal straight from the Bootstrap example  and have included only the bootstrap js  and not bootstrap-modal js   However  my modal is appearing underneath the grey fade  backdrop  and is non editable   Here s what it looks like     See this fiddle for one way  to reproduce this problem  The basic structure of that code is like this    lt body gt       lt p gt Lorem ipsum dolor sit amet  lt  p gt            lt div class  my-module  gt          This container contains the modal code           lt div class  modal fade  gt               lt div class  modal-dialog  gt                   lt div class  modal-content  gt                       lt div class  modal-body  gt Modal lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  body gt    body       padding-top  50px      my-module       position  fixed      top  0      left  0      Any ideas why this is or what I can do to fix this

User · Answer

I simply removed the position  fixed style from the  modal scss file and it seems to work fine for me  I still have the background and it works as expected       Modal background  modal-backdrop        commented out position  fixed - bug fix        position  fixed    top  0    right  0    bottom  0    left  0    z-index   zindex-modal-backdrop    background-color   modal-backdrop-bg       Fade for backdrop    amp  fade       opacity  0        Kudos to Rick Strahl for the guidance in  Bootstrap Modal Dialog showing under Modal Background

User · Answer

none of the suggested solutions above worked for me but this technique solved the issue       myModal   on  shown bs modal   function          To relate the z-index make sure backdrop and modal are siblings      this  before     modal-backdrop          Now set z-index of modal greater than backdrop      this  css  z-index   parseInt     modal-backdrop   css  z-index      1

User · Answer

You can also remove the z-index from  modal-backdrop  Resulting css would look like this     modal-backdrop        modal-backdrop in       opacity   35      filter  alpha opacity 35

User · Answer

Try overwriting the class  modal-open overflow value from hidden to visible    modal-open       overflow  visible

User · Answer

An other way to approach this is to remove the z-index from the  modal-backdrop in bootstrap css  This will cause the backdrop to be on the same level as the rest of your body  it will still fade  and your modal to be on top    modal-backdrop looks like this   modal-backdrop     position  fixed    top  0    right  0    bottom  0    left  0    background-color   000000

User · Answer

I got it to work by giving a high z-index value to the modal window AFTER opening it  E g        myModal   modal  show        myModal   css  z-index    1500

User · Answer

The problem has to do with the positioning of the parent containers  You can easily  move  your modal out from these containers before displaying it  Here s how to do it if you were showing your modal using js       myModal   appendTo  body   modal  show      Or  if you launch modal using buttons  drop the  modal  show    and just do       myModal   appendTo  body      This will keep all normal functionality  allowing you to show the modal using a button

User · Answer

I removed modal backdrop    modal-backdrop       display none      This is not better solution  but works for me

User · Answer

modal   insertAfter    body

User · Answer

set the z-index  modal to a highest value  For example   sidebarwrapper has z-index of 1100  so set the z-index of  modal to 1101   modal       z-index  1101

User · Answer

Solution provided by  Muhd is the best way to do it  But if you are stuck in a situation where changing structure of the page is not an option  use this trick     lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  data-backdrop  false  style  background-color  rgba 0  0  0  0 5    gt   lt div class  modal-dialog  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 h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt           lt  div gt           lt div class  modal-body  gt     lt  div gt           lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt               lt button type  button  class  btn btn-primary  gt Save changes lt  button gt           lt  div gt       lt  div gt   lt  div gt      The trick in here is data-backdrop  false  style  background-color  rgba 0  0  0  0 5     by removing the default backdrop and create a dummy one by setting background color of the dialog itself with some alpha   Update 1  As pointed out by  Gustyn that clicking on the background does not close the dialog as is expected  So to achieve that you have to add some java script code  Here is some example how you can achieve this         modal   click function event         event target  modal  hide

User · Answer

in your navbar navbar-fixed-top need z-index   1041 and also if u use bootstarp-combined min css the also change   navbar-fixed-top   navbar-fixed-bottom z-index to 1041

User · Answer

In my case solve it  add this in my stylesheet    x000D   x000D   modal-backdrop  x000D    z-index 0  x000D    x000D   x000D   x000D    with google debugger  can examine element BACKDROP And modify attributes  Goog luck

User · Answer

Use this in your modal    data-backdrop  false

User · Answer

I have a lighter and better solution    It could be easily solve through some additional CSS styles     hide the class  modal-backdrop  auto generated from Bootstrap js    modal-backdrop   display none  visibility hidden   position relative    set the background of  modal to a translucent black backdrop image    modal   background url  http   bin smwcentral net u 11361 BlackTransparentBackground png      translucent image from google images  z-index 1100        This will works best if you have a requirement that needs the modal to be inside an element and not near the  lt  body gt  tag

User · Answer

For those like me that added Bootstrap to Wordpress without the use of plugin or theme   I added bootstrap CSS and JS in the function php file  Then  called the modal in a wordpress page  No matter what I did  the  modal-backdrop kept being in fron of  mymodal  I found out that it was a z-index problem but  as  mymodal was generated inside the content div and  modal-backdrop at the end of  lt body gt   z-index couldn t work  What I did was moving  mymodal to the end of  as well after it was generated     document  ready function             mymodal   on  shown bs modal   function                 mymodal   appendTo document body                 By the way  I had to add shown bs modal inside   document  ready because it wasn t being called when I hit the button

User · Answer

If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur   Make sure the modal container and all of its parent elements are positioned the default way to fix the problem   Here are a couple ways to do this    Easiest way is to just move the modal div so it is outside any elements with special positioning   One good place might be just before the closing body tag  lt  body gt   Alternatively  you can remove position  CSS properties from the modal and its ancestors until the problem goes away   This might change how the page looks and functions  however

User · Answer

I ve simply set    myModal       z-index  1500      and it works       For the original question     my-module       z-index  1500

User · Answer

I tried all options supplied above but didn t get it to work using those   What did work  setting the z-index of the  modal-backdrop to -1    modal-backdrop     z-index  -1

User · Answer

Make Opacity to 1   modal  opacity 1

User · Answer

A but late on this but here is a generic solution -      var checkeventcount   1 prevTarget          modal   on  show bs modal   function  e            if typeof prevTarget     undefined      checkeventcount  1  amp  amp  e target  prevTarget                         prevTarget   e target            checkeventcount              e preventDefault                e target  appendTo  body   modal  show                      else if e target  prevTarget  amp  amp  checkeventcount  2                      checkeventcount--                       Visit this link - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar for details

User · Answer

The solution is to put the modal directly under the body tag  If that is not possible for some reason then just add a overflow  visible property to the tag enclosing the modal  or use the following code    lt script gt        document  on  show bs modal     modal   function                  div-wrapper-for-modal   css  overflow    visible                   document  on  hide bs modal     modal   function                  div-wrapper-for-modal   css  overflow    auto             lt  script gt   lt div class  div-wrapper-for-modal  gt       lt div class  modal hide fade  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 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   lt  div gt

User · Answer

Also  make sure that version of BootStrap css and js are the same ones  Different versions can also make modal appearing under background   For example   Bad    lt link href    maxcdn bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  rel  stylesheet  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 0 js bootstrap min js  gt  lt  script gt    Good    lt link href    maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css  rel  stylesheet  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 1 js bootstrap min js  gt  lt  script gt

User · Answer

modal-backdrop      bug fix - no overlay        display  none

User · Answer

Change the absolute position to relative    modal-backdrop       position  relative

User · Answer

CAREFUL WHEN APPENDING TO THE BODY   This will definitely get that modal from behind the backdrop       myModal   appendTo  body   modal  show      However  this adds another modal to the body each time you open it  which can cause head aches when adding controls like gridviews with edits and updates within update panels to the modal  Therefore  you may consider removing it when the modal closes   For example     document  on  hidden bs modal   function                  modal   remove              will remove the the added modal   of course that s an example  and you might want to use another class name that you added to the modal    And as already stated by others  you can simply turn off the back-drop from the modal  data-backdrop  false    or if you cannot live without the darkening of the screen you can adjust the  modal-backdrop css class  either increasing the z-index

User · Answer

I had some problem like this on Iphone and Ipad using Sharepoint 2013 Modal bootstrap keep z-index problems with backdrop   I just use this on JS     x000D   x000D      myModal   on  shown bs modal   function     x000D       To relate the z-index make sure backdrop and modal are siblings x000D       this  before     modal-backdrop     x000D       Now set z-index of modal greater than backdrop x000D       this  css  z-index   parseInt     modal-backdrop   css  z-index      1   x000D       x000D   x000D   x000D

User · Answer

This worked for me   sass      modal-backdrop     display  none    yourModal modal fade in     background  rgba 0  0  0  0 5

User · Answer

This problem can often be experienced when using things like gradients in CSS for things like backgrounds or even accordion headers   Unfortunately  modifying or overriding core Bootstrap CSS is undesirable  and can lead to unwanted side effects  The least intrusive approach is to add data-backdrop  false  but you may notice that the fade effect no longer works as expected   After following recent releases of Bootstrap  version 3 3 5 seems to resolve this issue with no unwanted side effects   Download  https   github com twbs bootstrap releases download v3 3 5 bootstrap-3 3 5-dist zip  Be sure to include the CSS files and JavaScript files from 3 3 5

User · Answer

For most people  this problem occurs when you place the modal code inside some other sections of the HTML and not right at the end of it   It s definitely not possible to put all the modals at the end of the HTML  especially if we are doing a single page application  I fixed it by removing the backdrop from the body at modal opening  and appended it to the div above the modal       theModal   on  show bs modal   function        setTimeout      gt          let modalBackdrop       modal-backdrop              modal-backdrop   remove              anyDivAboveTheModal   append modalBackdrop          100           I added the timeout to make sure the action is performed after the backdrop actually loaded

User · Answer

The easiest solution I found  that worked for all my cases  was an answer in a similar post  Here it is   modal     background  rgba 0  0  0  0 5       modal-backdrop     display  none     Basically  the original backdrop is not used  Instead you use the modal as the backdrop  The result is that it looks and behaves exactly as the original should ve  It avoids all the issues with z-indexes  for me changing z-index to 0 solved the issue  but created a new problem with my nav menu being between the modal and backdrop  and is simple  Credit goes to  Jevin O  Sewaruth for posting the original answer

User · Answer

I resolved my issue by adding data-backdrop  false  to the div    lt div class  modal fade  id  exampleModalCenter  data-backdrop  false  tabindex  -1  role  dialog  aria-labelledby  exampleModalCenterTitle  aria-hidden  true  gt

User · Answer

Try this code to CSS    modal-open   overflow  hidden  important     modal-open    position unset  z-index  0     modal-open  modal-backdrop   position  fixed  z-index  99998  important     modal-open  modal   position  fixed  z-index  99999  important      Ex    x000D   x000D        window  on  load   function     x000D         x000D     Latest compiled and minified JavaScript included as External Resource    x000D    document  ready function         modal   modal  show        x000D   x000D          x000D     Optional theme    x000D   import url    netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap-theme min css    x000D   x000D  body   x000D      margin  10px  x000D      padding-top  50px  x000D    x000D   x000D   my-module   x000D      position  fixed  x000D      top  0  x000D      left  0  x000D      border  1px solid red  x000D    x000D   x000D   modal-open   overflow  hidden  important    x000D   modal-open    position unset  z-index  0    x000D   modal-open  modal-backdrop   position  fixed  z-index  99998  important    x000D   modal-open  modal   position  fixed  z-index  99999  important    x000D   lt html gt  lt head gt  x000D     lt meta http-equiv  content-type  content  text html  charset UTF-8  gt  x000D     lt title gt Bootstrap 3 Template lt  title gt  x000D     lt meta http-equiv  content-type  content  text html  charset UTF-8  gt  x000D     lt meta name  robots  content  noindex  nofollow  gt  x000D     lt meta name  googlebot  content  noindex  nofollow  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   x000D   x000D     lt script type  text javascript  src    code jquery com jquery-compat-git js  gt  lt  script gt  x000D       lt link rel  stylesheet  type  text css  href   css normalize css  gt  x000D   x000D       lt link rel  stylesheet  type  text css  href   css result-light css  gt  x000D   x000D         lt script type  text javascript  src    netdna bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt  x000D         lt link rel  stylesheet  type  text css  href    netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  gt  x000D   x000D   x000D   lt  head gt  x000D   lt body class  modal-open  gt  x000D       lt div class  container  gt  x000D       lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor  Donec in turpis gravida  commodo mauris ac  gravida neque  Proin eget tristique lorem  Integer tincidunt sem sit amet metus ultricies  vitae placerat dui gravida  Pellentesque viverra  nunc imperdiet egestas imperdiet  magna massa varius arcu  vitae iaculis tortor quam vitae arcu  Fusce posuere non lectus vel cursus  In rutrum sed dui non sollicitudin  Proin ante magna  imperdiet ac nisl ut  rhoncus pellentesque tortor  lt  p gt  x000D   x000D       lt p gt Cras ac velit vitae elit tempus tempus  Nullam eu posuere leo  In posuere  tortor et cursus ultrices  lorem lacus efficitur dolor  a aliquet elit urna sed tortor  Donec dignissim ante ex  non congue ex efficitur sit amet  Suspendisse lacinia tristique odio  vel sagittis dui tempor tempus  Quisque gravida mauris metus  sed aliquam lacus sollicitudin sit amet  Pellentesque laoreet facilisis scelerisque  Nunc a pulvinar magna  Maecenas at mollis tortor  lt  p gt  x000D   x000D       lt p gt Vivamus ultricies  odio sed ornare maximus  libero justo dignissim nulla  nec pharetra neque nulla vel leo  Donec imperdiet sem sem  eu interdum justo tincidunt finibus  Vestibulum lacinia diam gravida risus luctus  elementum blandit dui porttitor  Quisque varius lacus et tempor faucibus  Nam eros nunc  gravida eu tellus eget  placerat porta leo  Duis tempus ultricies felis sit amet cursus  Nunc egestas ex non lacus laoreet tincidunt  Sed malesuada placerat elementum  Mauris eu rutrum nulla  Nunc consequat lacus eget libero tincidunt  in semper eros accumsan  Interdum et malesuada fames ac ante ipsum primis in faucibus  Suspendisse eu tincidunt quam  ut tincidunt eros  Donec luctus velit ac nulla lacinia malesuada  lt  p gt  x000D   x000D       lt p gt Vestibulum id mi in urna lacinia mollis  Pellentesque sit amet mauris ullamcorper  suscipit dolor in  lacinia leo  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae  In hac habitasse platea dictumst  Vivamus sollicitudin tempus massa sed molestie  Nullam quis neque vel nunc convallis porta a laoreet ex  Aliquam tempus hendrerit turpis eleifend convallis  Cras enim eros  fermentum sed velit eget  dignissim malesuada augue  Fusce ut fermentum nisl  vel imperdiet libero  Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue  Integer sapien nisi  scelerisque ultrices quam sit amet  aliquam placerat neque  Morbi consequat porttitor lacus  quis pulvinar dolor aliquam ut  Ut et dolor id est iaculis lobortis nec aliquet nisl  lt  p gt  x000D   x000D       lt p gt Nunc et tortor cursus  ullamcorper justo vitae  ullamcorper sapien  In fringilla urna quam  et finibus ipsum finibus eu  In fermentum turpis ut eros semper  non gravida purus ornare  Praesent vehicula lobortis lacinia  Vivamus nec elit libero  Suspendisse porta neque ut erat tempor rhoncus  Nunc quis massa in ante rhoncus bibendum  Nam maximus ex vitae orci luctus scelerisque  Sed id mauris iaculis  scelerisque mauris feugiat  vehicula ipsum  Duis semper erat ac nulla sodales gravida  Suspendisse nec sapien pharetra  scelerisque odio in  dignissim erat  Aenean feugiat sagittis eros  in mattis orci tristique lacinia  Phasellus posuere id neque sed mattis  Morbi accumsan faucibus ullamcorper  lt  p gt      x000D       x000D       x000D   lt div class  my-module  gt  x000D      This is a container for  my-module  with some fixed position  The module contains the modal code  x000D   lt div class  modal fade in  aria-hidden  false  style  display  block   gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt    lt  span gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt  x000D           lt h4 class  modal-title  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt p gt One fine body    lt  p gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  lt  --   modal-content -- gt  x000D     lt  div gt  lt  --   modal-dialog -- gt  x000D   lt  div gt  lt  --   modal -- gt  x000D       x000D   lt  div gt  x000D   lt  div gt  x000D   lt  body gt  lt  html gt  x000D   x000D   x000D

User · Answer

This behaviour sometimes occurs when there is an unclosed tag  most especially an unclosed  lt  div gt   You can review where your modal is located and ensure all tags are properly closed or better yet move the div modal closer to the bottom of the page  imediately before  lt  body gt  tag enclosure

User · Answer

In my case  the cause was boostrap min css  Once I excluded it from my HTML file as a reference  the dialog showed in front of the modal shade

User · Answer

Remove modal-backdrop background which is set to black in your bootstrap CSS  See mine    modal-backdrop       position  fixed    ---- commented and it shows        top  0      right  0      bottom  0      left  0      z-index  1030        background-color   000000         and then add this background color and opacity of o 5  see mine    modal-backdrop     position  fixed    top  0    right  0    bottom  0    left  0    z-index  1030     background-color  rgba 0  0  0  0 5     opacity  0 5       NOTE  Though these changes were made in the boostrap css  I used angular-strap and I didn t download or use the ng-animate css

User · Answer

I was fixed this by adding style below to DIV tag  style  background-color  rgba 0  0  0  0 5      And add custom css   modal-backdrop  position  relative

User · Answer

For me the easiest solution was to put my modal in a wrapper with absolute position and z-index higher than  modal-backdrop  Since modal-backdrop  at least in my case  has z-index 1050    x000D   x000D   my-modal-wrapper   x000D    position  absolute  x000D    z-index  1060  x000D    x000D   lt div class  my-modal-wrapper  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Add this to your style sheet    modal-backdrop       background-color   000      bottom  0      left  0      position  fixed      right  0      top  0      z-index  0  important

User · Answer

I have also encountered this problem and none of the solutions worked for me until i figured out i actually don t need a backdrop  You can easily remove the backdrop with the folowing code    lt div class  modal fade  id  createModal  data-backdrop  false  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt h4 gt Create Project lt  h4 gt               lt  div gt               lt div class  modal-body  gt Not yet made lt  div gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Note  the data-backdrop attribute needs to be set to false  other options  static or true

User · Answer

I had same problem and also check Muhd s answer   But  my modal needs left  top attribute  so just change fixed position to absolute and it worked    modal       position  absolute

User · Answer

In my case  I had a wrapper with the following    wrapper   margin  0 auto  position relative  z-index 1 overflow hidden     Only removed the z-index 1 and have no idea why fixed the problem  also for sure removing the relative position did but I needed it

User · Answer

I had the similar issue only for iOS devices   Solution was by removing -webkit-overflow-scrolling  touch from parent element

User · Answer

Check your css to see if you have any blurs and filters   I removed this code from my css and the modal worked normally again  modal-open  main-wrapper       -webkit-filter  blur 1px       -moz-filter  blur 1px       -o-filter  blur 1px       -ms-filter  blur 1px       filter  blur 1px

User · Answer

This would cover all modals without messing up any of the animations or expected behavior       document  on  show bs modal     modal   function          this  appendTo  body

User · Answer

According to the previous answers this could happen for several reasons  For me the problem was referencing two different Bootstrap links without knowing  so removing one solves the problem   In my case I included this one    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 5 css bootstrap min css        integrity  sha384-AysaV vQoT3kOAXZkl02PThvDr8HYKPZhNT5h CXfBThSRXQ6jW5DO2ekP5ViFdi  crossorigin  anonymous  gt    and another offline one that I have already in my laptop

User · Answer

Like Davide Lorigliola  I fixed it by cranking up the z-index    modal-backdrop   z-index  -999999

User · Answer

function addclassName        setTimeout function            var c   document querySelectorAll   modal-backdrop            for  var i   0  i  lt  c length  i                  c i  style zIndex    1040   i   20                      var d   document querySelectorAll   modal fade            for var i   0  i lt d length  i                 d i  style zIndex   1050   i   20                   10

User · Answer

Add this one to you pages  It work for me    lt script type  text javascript  gt          modal   parent   on  show bs modal   function  e      e relatedTarget attributes  data-target   value  appendTo  body        lt  script gt

User · Answer

I found that by adding an inline style tag to set  display  none  prevented this problem   The position of the code did not have any effect

User · Answer

what i find is that   in bootstrap 3 3 0  it s not right but when in bootstrap 3 3 5  it s right let s see the code  3 3 0    this  backdrop       lt div class  modal-backdrop     animate        gt         prependTo this  element    3 3 5    this  backdrop     document createElement  div             addClass  modal-backdrop     animate           appendTo this  body

User · Answer

I had this issue and the easiest way to fix it was addind z-index greater than 1040 on the modal-dialog div    lt div class  modal-dialog  style  z-index  1100   gt    I believe bootstrap create a div modal-backdrop fade in which in my case has the z-index 1040  so if You put the modal-dialog on top of this  it should not be grey out anymore

User · Answer

Having transform translate3d 0  0  0    On any ancestor element can cause this as well  Tested on bootstrap 4 6 0

User · Answer

You can make a workaround but this will remove the fade from all the page  The modal will popup like Facebook popups   After opening the modal try        modal-backdrop   removeClass  modal-backdrop

User · Answer

Just add two lines of CSS    modal-backdrop z-index  1050    modal z-index  1060     The  modal-backdrop should have 1050 value to set it over the navbar

User · Answer

Hi I had the same issue then I realize that when you using bootsrap 3 1  Unlike in older versions of bootsrap  2 3 2  the html structure of the modal was changed   you must wrap your modal header body and footer with modal-dialog and modal-content     lt div class  modal hide fade  gt      lt div class  modal-dialog  gt       lt div class  modal-content  gt         here goes the modal header body and footer         lt  div gt     lt  div gt     lt  div gt

[javascript] Bootstrap modal appearing under background

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

[javascript] Bootstrap modal appearing under background

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

Examples related to modal-dialog