0

This question might be flagged as duplicate but my issue isn't solved by the things mentioned in the relevant SO thread, here is the link to that

I have to make a modal with an Image into it and stack it into an existing AngularJS application. So, by far what I have done is this. When I do data-backdrop="false", the whole black tint gets removed and that's pretty obvious. But I don't want that. I want the black tint to remain there but behind the modal not stacking on top of it.

How can I do that, without using jQuery.

Here is my code:

<li ui-sref-active="active">
            <a href="javascript:;" data-toggle="modal" data-target="#myModal">
              <i class="fa fa-bullhorn" style="color: #fff200"></i>
             <span id="glow" style="color: #fff200">What's New</span>
            </a>
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h3 class="modal-title" style="color: #000"><strong>New Features</strong></h3>
                    </div>
                    <div class="modal-body">
                      <center>
                        <img ng-src="{{'images/'+ 'Screen.png'}}" alt="New Features Screenshots" class="img-thumbnail img-responsive">
                      </center>
                    </div>
                    </div>
                    <!-- <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div> -->
                  </div>
                </div>
            </div>
          </li>
s4tr2
  • 415
  • 1
  • 9
  • 27

2 Answers2

1

I used to have the same problem like you when using angularjs with bootstrap. Changing z-index of the dialog and the back-drop fixed the issue for me. Hope this helps you.

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

.modal {
    z-index: 9999;
    background-color:transparent!important;
}
NiK648
  • 1,484
  • 1
  • 9
  • 18
Wara Haii
  • 202
  • 2
  • 5
0

Hey i know this question is a bit old, but i found a bit of a modification to work for me.

i was using angular cli > 6.0.0. I also used ng-bootstrap version 2.0.0

go into styles.css right under src, use

 .modal-backdrop{
    z-index: 20;
 }

i found that the .modal had a z index of 40 so i just modified the backdrop to have a 20 z index.

Jaime Reynoso
  • 146
  • 1
  • 8