title: How to change the background color of pop up header?
body: <p>I am getting issue in background color on popup  header.I  am trying to change the background color of pop up header using below code but its not working. The header background color for the popup not taking the below css. Please help me.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;a href="#openModal"&gt;Open Modal&lt;/a&gt;
          &lt;div id="openModal" class="modalDialog"&gt;
  
                          &lt;div class="pop-header"&gt;
                              &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
                          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>    .pop-header
      {
           width: 100%;
           background-color: #000;
           height: 50px;
           padding: 20px;
      }
  
  
      .modalDialog {
          position: fixed;
          font-family: Arial, Helvetica, sans-serif;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: rgba(0,0,0,0.8);
          z-index: 99999;
          opacity:0;
          -webkit-transition: opacity 400ms ease-in;
          -moz-transition: opacity 400ms ease-in;
          transition: opacity 400ms ease-in;
          pointer-events: none;
      }
  
  
      .modalDialog:target {
          opacity:1;
          pointer-events: auto;
      }
  
      .modalDialog &gt; div {
          width: 600px;
          position: relative;
          margin: 2% auto;
          padding: 5px 20px 13px 20px;
          border-radius: 5px;
          background: #fff;
          height: 100%;
      }
  
      .close
      {
          float: right;
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/mWrjq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mWrjq.png" alt="enter image description here"></a></p>