title: How to change css if specific modal is open
body: <p>I'm working on a website that has several different modals which can be accessed while viewing other modals. For example you click a button it opens up a modal, then while viewing that modal you also have the option to click a button and view 9 other modals.</p>
  
  <p>What I'm trying to do is detect which modal is visible and then have that button for that modal look different then the rest (underlined &amp; bold to be specific). Similar to have navigation if you're on the home page the home tab is highlighted in the nav.</p>
  
  <p>Here is the code for the modals I'm using. Edit: the first set of buttons has slightly different code than the bottom two sets, I was changing things around to try and make it work. My original code where the bottom two sets of buttons.</p>
  
  <pre><code>&lt;div id="Building-Meisterhaus-Sud" style="float: left; margin:10px;  padding: 5px; text-align: center;"&gt;
    &lt;h5 style="font-weight: bold"&gt; Meisterhaus Nord &lt;/h5&gt;
  
    &lt;a data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" href="#floor-modal-898" data-target=""  data-dismiss="modal" role="tab" aria-label="Close"&gt; EG &lt;/a&gt;                                  
    &lt;a data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-918"  data-dismiss="modal" role="tab" aria-label="Close"&gt;  1. OG &lt;/a&gt;                                               
    &lt;a data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-920"  data-dismiss="modal" role="tab" aria-label="Close"&gt; 2. OG &lt;/a&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="Building-Meisterhaus-Sud" style=" float: left; margin: 10px;  padding: 5px; text-align: center;"&gt;
    &lt;h5 style="font-weight: bold"&gt; Meisterhaus Mitte &lt;/h5&gt;
    &lt;a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-921" data-dismiss="modal" &gt; EG &lt;/a&gt; |
    &lt;a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-922"  data-dismiss="modal" &gt;  1. OG &lt;/a&gt; |
    &lt;a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-923" data-dismiss="modal" &gt; 2. OG &lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id="Building-Meisterhaus-Sud" style="float: left; margin: 10px; padding: 5px; text-align: center;"&gt;
    &lt;h5 style="font-weight: bold"&gt; Meisterhaus Sud &lt;/h5&gt;
    &lt;a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;"  data-dismiss="modal" data-toggle="modal" data-target="#floor-modal-924" aria-label="Close"&gt; EG &lt;/a&gt; |
    &lt;a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-dismiss="modal" data-toggle="modal" data-target="#floor-modal-925" aria-label="Close"&gt; 1. OG &lt;/a&gt; |
    &lt;a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-dismiss="modal" data-toggle="modal" data-target="#floor-modal-926" aria-label="Close"&gt; 2. OG &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>If you notice in the picture below how Impressionen is bold and underlined because it's currently in an "active state" I want this same effect on the 9 buttons above it which display the different modals. I've tried jQuery functions but can't seem to get it to work.</p>
  
  <p><a href="https://i.stack.imgur.com/hXWbp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hXWbp.png" alt="This is the modal with the buttons I&#39;m trying to change highlighted"></a></p>