html - How to change the background color of pop up header? -


i getting issue in background color on popup header.i trying change background color of pop header using below code not working. header background color popup not taking below css. please me.

html

    <a href="#openmodal">open modal</a>         <div id="openmodal" class="modaldialog">                          <div class="pop-header">                             <a href="#close" title="close" class="close">x</a>                         </div>     </div> 

css

    .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 > div {         width: 600px;         position: relative;         margin: 2% auto;         padding: 5px 20px 13px 20px;         border-radius: 5px;         background: #fff;         height: 100%;     }      .close     {         float: right;     } 

enter image description here

change color background in .modaldialog > div css.

.modaldialog > div {         width: 600px;         position: relative;         margin: 2% auto;         padding: 5px 20px 13px 20px;         border-radius: 5px;         background: red; //here         height: 100%;     } 

fiddle

edit:

if want change color of header part should put 1 div parent .pop-header

<div>   <div class="pop-header">   <a href="#close" title="close" class="close">x</a> </div> 

and css:

.pop-header     {        width: 100%;        background-color: red;        height: 50px;     } 

updated fiddle

check per image

new fiddle


Comments

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -