Multiple modals overlay

Question

I need that the overlay shows above the first modal  not in the back      x000D   x000D      openBtn   click function    x000D       myModal   modal  show true   x000D      x000D   lt a data-toggle  modal  href   myModal  class  btn btn-primary  gt Launch modal lt  a gt  x000D   x000D   lt div class  modal  id  myModal  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  aria-hidden  true  gt    lt  button gt  x000D             lt h4 class  modal-title  gt Modal title lt  h4 gt  x000D           lt  div gt  lt div class  container  gt  lt  div gt  x000D           lt div class  modal-body  gt  x000D            Content for the dialog   modal goes here  x000D             lt br gt  x000D             lt br gt  x000D             lt br gt  x000D             lt br gt  x000D             lt br gt  x000D             lt a data-toggle  modal  href   myModal2  class  btn btn-primary  gt Launch modal lt  a gt  x000D           lt  div gt  x000D           lt div class  modal-footer  gt  x000D             lt a href     data-dismiss  modal  class  btn  gt Close lt  a gt  x000D             lt a href     class  btn btn-primary  gt Save changes lt  a gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  modal  id  myModal2  data-backdrop  static  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  aria-hidden  true  gt    lt  button gt  x000D             lt h4 class  modal-title  gt Second Modal title lt  h4 gt  x000D           lt  div gt  lt div class  container  gt  lt  div gt  x000D           lt div class  modal-body  gt  x000D            Content for the dialog   modal goes here  x000D           lt  div gt  x000D           lt div class  modal-footer  gt  x000D             lt a href     data-dismiss  modal  class  btn  gt Close lt  a gt  x000D             lt a href     class  btn btn-primary  gt Save changes lt  a gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 0 0 css bootstrap min css    gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D    I tried to change the z-index of  modal-backdrop  but it becomes a mess   In some cases I have more than two modals on the same page

User · Answer

I created a Bootstrap plugin that incorporates a lot of the ideas posted here.

Demo on Bootply: http://www.bootply.com/cObcYInvpq

Github: https://github.com/jhaygt/bootstrap-multimodal

It also addresses the issue with successive modals causing the backdrop to become darker and darker. This ensures that only one backdrop is visible at any given time:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

The z-index of the visible backdrop is updated on both the show.bs.modal and hidden.bs.modal events:

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

User · Answer

Here is some CSS using nth-of-type selectors that seems to work    modal nth-of-type even        z-index  1042  important     modal-backdrop in nth-of-type even        z-index  1041  important      Bootply  http   bootply com 86973

User · Answer

Everytime you run sys showModal function increment z-index and set it to your new modal    function system          this modalIndex   2000       this showModal   function  selector            this modalIndex               selector  modal               backdrop   static               keyboard  true                       selector  modal  show              selector  css  z-index   this modalIndex                     var sys   new system     sys showModal   myModal1    sys showModal   myModal2

User · Answer

If you re looking for Bootstrap 4 solution  there s an easy one using pure CSS    modal fade       background  rgba 0 0 0 0 5

User · Answer

For me  these simple scss rules worked perfectly    modal show    z-index  1041       modal show      z-index  1043         modal-backdrop show     z-index  1040       modal-backdrop show      z-index  1042          If these rules cause the wrong modal to be on top in your case  either change the order of your modal divs  or change  odd  to  even  in above scss

User · Answer

Check this out  This solution solved the problem for me  few simple CSS lines    modal nth-of-type even    z-index  1042  important     modal-backdrop in nth-of-type even        z-index  1041  important      Here is a link to where I found it  Bootply Just make sure that the  modual that need to appear on Top is second in HTML code  so CSS can find it as  even

User · Answer

Something shorter version based off Yermo Lamers  suggestion  this seems to work alright  Even with basic animations like fade in out and even crazy batman newspaper rotate  http   jsfiddle net ketwaroo mXy3E       modal   on  show bs modal   function event        var idx       modal visible   length        this  css  z-index   1040    10   idx            modal   on  shown bs modal   function event        var idx        modal visible   length  -1     raise backdrop after animation          modal-backdrop   not   stacked   css  z-index   1039    10   idx            modal-backdrop   not   stacked   addClass  stacked

User · Answer

A simple solution for Bootstrap 4 5  modal fade     background  rgba 0  0  0  0 5       modal-backdrop fade     opacity  0

User · Answer

EDIT  Bootstrap 3 3 4 has solved this problem  and other modal issues  so if you can update your bootstrap CSS and JS that would be the best solution  If you can t update the solution below will still work and essentially does the same thing as bootstrap 3 3 4  recalculate and apply padding    As Bass Jobsen pointed out  newer versions of Bootstrap have the z-index solved  The modal-open class and padding-right were still problems for me but this scripts inspired by Yermo Lamers solution solves it  Just drop it in your JS file and enjoy     document  on  hide bs modal     modal   function  event        var padding right   0        each     modal    function            if   this  hasClass  in    amp  amp    this  modal   data  bs modal   scrollbarWidth  gt  padding right                padding right     this  modal   data  bs modal   scrollbarWidth                          body   data  padding right   padding right    px           document  on  hidden bs modal     modal   function  event           body   data  open modals      body   data  open modals   - 1       if    body   data  open modals    gt  0               body   addClass  modal-open               body   css  padding-right      body   data  padding right                  document  on  shown bs modal     modal   function  event        if  typeof    body   data  open modals        undefined                body   data  open modals   0                body   data  open modals      body   data  open modals     1          body   css  padding-right    parseInt    body   css  padding-right         body   data  open modals      px

User · Answer

Add global variable in modal js   var modalBGIndex   1040     modal backdrop background var modalConIndex   1042     modal container data       show function inside add variable - Modal prototype backdrop  var e        Event  show bs modal     relatedTarget   relatedTarget     modalConIndex   modalConIndex   2     add this line inside  Modal prototype show   that  element      show        scrollTop 0  that  element css  z-index  modalConIndex     add this line after show modal   if  this isShown  amp  amp  this options backdrop          var doAnimate     support transition  amp  amp  animate        modalBGIndex   modalBGIndex   2     add this line increase modal background index 2   this  backdrop addClass  in   this  backdrop css  z-index  modalBGIndex     add this line after backdrop addclass

User · Answer

When solving Stacking modals scrolls the main page when one is closed i found that newer versions of Bootstrap  at least since version 3 0 3  do not require any additional code to stack modals   You can add more than one modal  of course having a different ID  to your page  The only issue found when opening more than one modal will be that closing one remove the modal-open class for the body selector   You can use the following Javascript code to re-add the modal-open        modal   on  hidden bs modal   function  e        if     modal   hasClass  in             body   addClass  modal-open                    In the case that do not need the backdrop effect for the stacked modal you can set data-backdrop  false    Version 3 1 1  fixed Fix modal backdrop overlaying the modal s scrollbar  but the above solution seems also to work with earlier versions

User · Answer

My solution for bootstrap 4  working with unlimited depth of modals and dynamic modal       modal   on  show bs modal   function          var  modal     this       var baseZIndex   1050      var modalZIndex   baseZIndex        modal show   length   20       var backdropZIndex   modalZIndex - 10       modal css  z-index   modalZIndex  css  overflow    auto            modal-backdrop show last   css  z-index   backdropZIndex           modal   on  shown bs modal   function          var baseBackdropZIndex   1040          modal-backdrop show   each function  i              this  css  z-index   baseBackdropZIndex    i   20                    modal   on  hide bs modal   function          var  modal     this        modal css  z-index

User · Answer

After seeing many fixes for this  and none of them were exactly what I needed I ve came up with a even shorter solution that is inspired by  YermoLamers  amp   Ketwaroo   Backdrop z-index fix This solution uses a setTimeout because the  modal-backdrop isn t created when the event show bs modal is triggered     document  on  show bs modal     modal   function          var zIndex   1040    10       modal visible   length         this  css  z-index   zIndex       setTimeout function                 modal-backdrop   not   modal-stack   css  z-index   zIndex - 1  addClass  modal-stack           0          This works for every  modal created on the page  even dynamic modals  The backdrop instantly overlays the previous modal   Example jsfiddle  If you don t like the hardcoded z-index for any reason you can calculate the highest z-index on the page like this   var zIndex   Math max apply null  Array prototype map call document querySelectorAll       function el      return  el style zIndex        10    Scrollbar fix If you have a modal on your page that exceeds the browser height  then you can t scroll in it when closing an second modal  To fix this add     document  on  hidden bs modal     modal   function              modal visible   length  amp  amp    document body  addClass  modal-open          Versions This solution is tested with bootstrap 3 1 0 - 3 3 5

User · Answer

Try adding the following to your JS on bootply      myModal2   on  show bs modal   function            myModal   css  z-index   1030           myModal2   on  hidden bs modal   function            myModal   css  z-index   1040        Explanation   After playing around with the attributes using Chrome s dev tool   I have realized that any z-index value below 1031 will put things behind the backdrop    So by using bootstrap s modal event handles I set the z-index to 1030  If  myModal2 is shown and set the z-index back to 1040 if  myModal2 is hidden   Demo

User · Answer

No script solutions   using only css given you have two layers of modals  set the 2nd modal to a higher z index   second-modal   z-index  1070    div modal-backdrop   div modal-backdrop      z-index  1060

User · Answer

Check count of modals and add the value to backdrop as z-index      var zIndex   1500        modal   length 2    1      this popsr css   z-index   zIndex         this popsr on  shown bs modal   function                this  next   modal-backdrop   css  z-index   zIndex - 1                this popsr modal  show

User · Answer

The solution to this for me was to NOT use the  fade  class on my modal divs

User · Answer

I had a similar scenario  and after a little bit of R amp D I found a solution  Although I m not great in JS still I have managed to write down a small query   http   jsfiddle net Sherbrow ThLYb    lt div class  ingredient-item  data-toggle  modal  data-target   myModal  gt test1  lt p gt trerefefef lt  p gt  lt  div gt   lt div class  ingredient-item  data-toggle  modal  data-target   myModal  gt tst2  lt p gt Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum lt  p gt  lt  div gt   lt div class  ingredient-item  data-toggle  modal  data-target   myModal  gt test3  lt p gt afsasfafafsa lt  p gt  lt  div gt    lt  -- Modal -- gt   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  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 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   lt  div gt           ingredient-item   on  click   function e       e preventDefault         var content     this  find  p   text             modal-body   html content

User · Answer

Each modal should be given a different id and each link should be targeted to a different modal id  So it should be something like that    lt a href   myModal  data-toggle  modal  gt       lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  lt  div gt       lt a href   myModal2  data-toggle  modal  gt       lt div id  myModal2  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  lt  div gt

User · Answer

Unfortunately I do not have the reputation to comment  but it should be noted that the accepted solution with the hardcoded baseline of a 1040 z-index seems to be superior to the zIndex calculation that tries to find the maximum zIndex being rendered on the page   It appears that certain extensions plugins rely on top level DOM content which makes the  Max calculation such an obscenely large number  that it can t increment the zIndex any further   This results in a modal where the overlay appears over the modal incorrectly  if you use Firebug Google Inspector tools you ll see a zIndex on the order of 2 n - 1   I haven t been able to isolate what the specific reason the various forms of Math Max for z-Index leads to this scenario  but it can happen  and it will appear unique to a few users    My general tests on browserstack had this code working perfectly    Hope this helps someone

User · Answer

window  scroll function        if     modal in   length  amp  amp      body   hasClass  modal-open                           body   addClass  modal-open

User · Answer

In my case the problem was caused by a browser extension that includes the bootstrap js files where the show event handled twice and two modal-backdrop divs are added  but when closing the modal only one of them is removed   Found that by adding a subtree modification breakpoint to the body element in chrome  and tracked adding the modal-backdrop divs

User · Answer

Combining A1rPun s answer with the suggestion by StriplingWarrior  I came up with this     document  on        show bs modal   function              var zIndex   1040    10       modal visible   length             this  css  z-index   zIndex           setTimeout function                     modal-backdrop   not   modal-stack   css  z-index   zIndex - 1  addClass  modal-stack               0               hidden bs modal   function             if      modal visible   length  gt  0                   restore the modal-open class to the body element  so that scrolling works                properly after de-stacking a modal              setTimeout function                       document body  addClass  modal-open                   0                        modal      Works even for dynamic modals added after the fact  and removes the second-scrollbar issue  The most notable thing that I found this useful for was integrating forms inside modals with validation feedback from Bootbox alerts  since those use dynamic modals and thus require you to bind the event to document rather than to  modal  since that only attaches it to existing modals   Fiddle here

User · Answer

I realize an answer has been accepted  but I strongly suggest not hacking bootstrap to fix this    You can pretty easily achieve the same effect by hooking the shown bs modal and hidden bs modal event handlers and adjusting the z-index there    Here s a working example  A bit more info is available here   This solution works automatically with arbitrarily deeply stacks modals   The script source code     document  ready function              modal   on  hidden bs modal   function event              this  removeClass   fv-modal-stack                body   data   fv open modals      body   data   fv open modals    - 1                     modal   on  shown bs modal   function  event               keep track of the number of open modals         if   typeof     body   data   fv open modals          undefined                     body   data   fv open modals   0                          if the z-index of this modal has been set  ignore          if    this  hasClass  fv-modal-stack                  return                       this  addClass  fv-modal-stack               body   data  fv open modals      body   data  fv open modals      1              this  css  z-index   1040    10      body   data  fv open modals                   modal-backdrop   not   fv-modal-stack   css  z-index   1039    10      body   data  fv open modals                  modal-backdrop   not  fv-modal-stack   addClass  fv-modal-stack

User · Answer

Finally solved  I tested it in many ways and works fine   Here is the solution for anyone that have the same problem  Change the Modal prototype show function  at bootstrap js or modal js   FROM   if  transition       that  element 0  offsetWidth    force reflow       that  element     addClass  in       attr  aria-hidden   false   that enforceFocus     TO   if  transition        that  element 0  offsetWidth    force reflow    that  backdrop     css  z-index    1030    10       modal fade in   length     that  element     css  z-index    1040    10       modal fade in   length        addClass  in       attr  aria-hidden   false   that enforceFocus     It s the best way that i found  check how many modals are opened and change the z-index of the modal and the backdrop to a higher value

User · Answer

This is a very old threat but  for me just worked to move the html code of the modal I want in the front at first place in file

User · Answer

This code just works perfectly for bootstrap 4  The problem in other codes were how the modal-backdrop is selected  It ll be better if you used the jQuery next select on the actual modal after the modal has been shown   x000D   x000D    document  on  show bs modal     modal   function              var zIndex   1040    10       modal   length           var model     this           model css  z-index   zIndex           model attr  data-z-index   zIndex                  document  on  shown bs modal     modal   function              var model     this           var zIndex   model attr  data-z-index            model next   modal-backdrop show   css  z-index   zIndex - 1            x000D   x000D   x000D

User · Answer

The other solutions did not work for me out of the box   I think perhaps because I am using a more recent version of Bootstrap  3 3 2       the overlay was appearing on top of the modal dialog     I refactored the code a bit and commented out the part that was adjusting the modal-backdrop   This fixed the issue       var  body      body        var OPEN MODALS COUNT    fv open modals       var Z ADJUSTED    fv-modal-stack       var defaultBootstrapModalZindex   1040          keep track of the number of open modals                        if   body data OPEN MODALS COUNT      undefined             body data OPEN MODALS COUNT  0               body on  show bs modal     modal   function  event                if     this  hasClass Z ADJUSTED       only if z-index not already set                          Increment count  amp  mark as being adjusted              body data OPEN MODALS COUNT   body data OPEN MODALS COUNT    1                 this  addClass Z ADJUSTED                   Set Z-Index               this  css  z-index   defaultBootstrapModalZindex    1    body data OPEN MODALS COUNT                       BackDrop z-index    Doesn t seem to be necessary with Bootstrap 3 3 2                        modal-backdrop   not        Z ADJUSTED                          css  z-index   1039    10    body data OPEN MODALS COUNT                           addClass Z ADJUSTED                          body on  hidden bs modal     modal   function  event                   Decrement count  amp  remove adjusted class          body data OPEN MODALS COUNT   body data OPEN MODALS COUNT  - 1             this  removeClass Z ADJUSTED              Fix issue with scrollbar being shown when any modal is hidden         if  body data OPEN MODALS COUNT   gt  0               body addClass  modal-open              As a side note  if you want to use this in AngularJs  just put the code inside of your module s  run   method

User · Answer

Update  22 01 2019  13 41 I optimized the solution by jhay  which also supports closing and opening same or different dialogs when for example stepping from one detail data to another forwards or backwards    function     window     use strict    var MultiModal   function  element        this  element     element       this modalIndex   0      MultiModal BASE ZINDEX   1040      Max index number  When reached just collate the zIndexes    MultiModal MAX INDEX   5   MultiModal prototype show   function  target        var that   this      var  target     target           Bootstrap triggers the show event at the beginning of the show function and before        the modal backdrop element has been created  The timeout here allows the modal        show function to complete  after which the modal backdrop will have been created        and appended to the DOM          we only want one backdrop  hide any extras     setTimeout function                 Count the number of triggered modal dialogs            that modalIndex             if  that modalIndex  gt   MultiModal MAX INDEX                   Collate the zIndexes of every open modal dialog according to its order                that collateZIndex                          Modify the zIndex             target css  z-index   MultiModal BASE ZINDEX    that modalIndex   20    10               we only want one backdrop  hide any extras            if  that modalIndex  gt  1                   modal-backdrop   not   first   addClass  hidden             that adjustBackdrop                 MultiModal prototype hidden   function  target        this modalIndex--      this adjustBackdrop         if      modal in   length     1                Reset the index to 1 when only one modal dialog is open            this modalIndex   1              modal in   css  z-index   MultiModal BASE ZINDEX   10           var  modalBackdrop       modal-backdrop first             modalBackdrop removeClass  hidden             modalBackdrop css  z-index   MultiModal BASE ZINDEX              MultiModal prototype adjustBackdrop   function                      modal-backdrop first   css  z-index   MultiModal BASE ZINDEX    this modalIndex   20        MultiModal prototype collateZIndex   function           var index   1      var  modals       modal in   toArray           modals sort function x  y                 return  Number x style zIndex  - Number y style zIndex                      for  i   0  i  lt   modals length  i                     modals i   css  z-index   MultiModal BASE ZINDEX    index   20    10           index                this modalIndex   index      this adjustBackdrop         function Plugin method  target        return this each function              var  this     this           var data    this data  multi-modal-plugin             if   data               this data  multi-modal-plugin    data   new MultiModal this              if  method              data method  target                fn multiModal   Plugin    fn multiModal Constructor   MultiModal     document  on  show bs modal   function  e          document  multiModal  show   e target          document  on  hidden bs modal   function  e          document  multiModal  hidden   e target        jQuery  window

User · Answer

If you want a specific modal to appear on top of another open modal  try adding the HTML of the topmost modal after the other modal div   This worked for me    lt div id  modal-under  class  modal fade        gt    lt  -- This modal-upper should appear on top of  modal-under when both are open  Place its HTML after  modal-under  -- gt   lt div id  modal-upper  class  modal fade        gt

User · Answer

work for open close multi modals   jQuery function         jQuery document  on  show bs modal     modal   function                 var maxZ   parseInt jQuery   modal-backdrop   css  z-index       1040           jQuery   modal visible   each function                         maxZ   Math max parseInt jQuery this  css  z-index     maxZ                        jQuery   modal-backdrop   css  z-index   maxZ           jQuery this  css  z-index   maxZ   1           jQuery   modal-dialog   this  css  z-index   maxZ   2                jQuery document  on  hidden bs modal     modal   function                   if  jQuery   modal visible   length                        jQuery document body  addClass  modal-open                var maxZ   1040              jQuery   modal visible   each function                               maxZ   Math max parseInt jQuery this  css  z-index     maxZ                              jQuery   modal-backdrop   css  z-index   maxZ-1                          Demo   https   www bootply com cObcYInvpq

[javascript] Multiple modals overlay

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

[javascript] Multiple modals overlay

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to modal-dialog