28626

Opening modal from within a modal, backdrop z-index

Question:

I need to be able to open a modal within another modal (while the first modal stays open). Here's an example of that:

<a href="http://jsfiddle.net/k2coz893/2/" rel="nofollow">http://jsfiddle.net/k2coz893/2/</a>

When you open the second modal, you'll notice that the backdrop/background of the second modal doesn't cover the first modal (i.e. the first modal can still clearly be seen when the second modal is open). This seems to be because the z-index of the second modal's backdrop is the same as the other and therefore the first modal is still visible.

How can I prevent this? How can I have the second modal's backdrop cover the first modal?

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal </button> <div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" 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> <h4 class="modal-title">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal </button>

Something

Something

Something

Something

Something

</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <div class="modal-dialog" 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> <h4 class="modal-title">second</h4> </div> <div class="modal-body">

One fine body&hellip;

</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

Answer1:

Overriding default Bootstrap's css for more than one modals will fix your problem.

<strong>Method #01:</strong>

Following css will work in case you have only 2 modals.

.modal-backdrop + .modal-backdrop { z-index: 1040; } .modal + .modal { z-index: 1050; }

<pre class="snippet-code-css lang-css prettyprint-override">@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } .modal + .modal { z-index: 1060; } .modal-backdrop + .modal-backdrop { z-index: 1050; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal </button> <div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" 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> <h4 class="modal-title">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal </button>

Something

Something

Something

Something

Something

</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <div class="modal-dialog" 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> <h4 class="modal-title">second</h4> </div> <div class="modal-body">

One fine body&hellip;

</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

<strong>Method #02:</strong>

However if there are many nested modals, you can use the following trick:

.modal-backdrop { display: none; } .modal { background: rgba(0, 0, 0, 0.5); }

<pre class="snippet-code-css lang-css prettyprint-override">@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'); body { margin: 10px; } .modal-backdrop { display: none; } .modal { background: rgba(0, 0, 0, 0.5); } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal </button> <div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" 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> <h4 class="modal-title">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal </button>

Something

Something

Something

Something

Something

</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <div class="modal-dialog" 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> <h4 class="modal-title">second</h4> </div> <div class="modal-body">

One fine body&hellip;

</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

Answer2:

Fixed it for you :) <a href="http://jsfiddle.net/cqLex5ga/4/" rel="nofollow">http://jsfiddle.net/cqLex5ga/4/</a>

#myModal2 { background: rgba(0,0,0,0.7); }

Answer3:

Although @user1389637 has already answered your question, I would like to suggest you to use some jQuery events to on/off the opacity of the previous modals. You can also use these events for other purposes.

$("#myModal2").on('show.bs.modal', function () { $("#myModal").css("opacity", "0.5"); }); $("#myModal2").on('hide.bs.modal', function () { $("#myModal").css("opacity", "1"); });

<a href="http://jsfiddle.net/130zrs9L/" rel="nofollow">Fiddle</a>

Answer4:

This should work , if your HTML is going to stay the same. <a href="http://jsfiddle.net/k2coz893/5/" rel="nofollow">http://jsfiddle.net/k2coz893/5/</a>

.modal + .modal { z-index:1050; } .modal-backdrop + .modal-backdrop{ z-index:1045; }

Or you can add new classes to new modal to achieve the same

Recommend

  • Passing JSON objects in a REST HTTP GET request using Spring MVC
  • Building with Lombok's @Slf4j and Eclipse: Cannot find symbol log
  • Qt 5 : Mouse Wheel event behaviour for zooming image
  • Getting values from parameter store in AWS
  • Parse and upload a csv file in D3.js V5
  • why this left join returns only one record?
  • Connect SQL Server on button click VB.net
  • rvest: extract tables with url's instead of text
  • htaccess merge 2 segments with underscore
  • SPOJ: GENERAL (Time limit exceeded)
  • Pass multiple lines of stdin input to interactive Java command line program, non-interactively
  • Semi-local Levenshtein distance
  • JSF with Enum 'Validation Error: Value is not valid'
  • Joining across databases with dbplyr
  • ASP.NET MVC 3 ListBox validation
  • iOS - open another application that exists on the phone?
  • MVC3 Extension for ValidatorMessage
  • Planned Contrasts on glmmTMB
  • connect.cookieParser and connect.session
  • Laravel 5 - Cache remember doesn't work
  • SELECT on JSONField with Django
  • Refresh JSF component after custom javascript Ajax call
  • Creating http response as a return value for mockito
  • Videos won't upload
  • Validating my form with Jquery
  • Showing image on a acro text field position
  • GTK3 + OpenGL for windows: multiple GtkGLArea (ie. OpenGL contexts)
  • Find all parks for a given zipcode with google maps
  • How to control xtics in gnuplot
  • Splitting ReportLab table across PDF page (side by side)?
  • Java Collections.shuffle() weird behaviour [closed]
  • Query takes almost two seconds but matches only two rows - why isn't the index helping?
  • LINQ to populate treeview based upon grouping
  • Annotate objects in a queryset with next and previous object ids
  • Create an average of multiple excel chart without the data source
  • What Exception is thrown on timeout?
  • how to run ejabberd with Erlang on Heroku?
  • How to specify generic type when the type is only known at runtime?
  • VLOOKUP in IMPORTRANGE
  • Firebase: How to read from external DB?