Как изменить цвет фона всплывающего заголовка?

Question

Я получаю проблему в цвет фона в всплывающем заголовке. Я пытаюсь изменить цвет фона всплывающего заголовка, используя приведенный ниже код, но его не работает. Цвет фона заголовка для всплывающего окна не принимает значение css. Пожалуйста, помогите мне.

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; 
    } 

Answer 1

Изменить цвет background в .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:

Если вы хотите изменить цвет только части заголовка, то вы должны поставить одну Div родителю .pop-header

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

И CSS :

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

Updated Fiddle

Проверить в соответствии с вашим изображением

New Fiddle

Answer 2

заменить класс .pop-заголовок с ниже:

.pop-header 
    { 
     width: 100%; 
     background-color: #000!important; 
     height: 50px!important; 
     padding: 20px; 
    } 

Надеюсь, это вам поможет.

Answer 3

вы можете попробовать это один:

.pop-header 
    { 
     width: 100%; 
     background-color: #000!important; 
     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; 
     color:white; 
    } 

DEMO HERE

Или

.pop-header 
    { 
     width: 100%; 
     background-color: #000!important; 
     height: 50px; 
     padding: 20px; 

    } 

.pop-header p 
{ 
    color:white; 
    background-color:blue; 
    float:left; 
    margin:0px; 

    width:100%; 
    top:0px; 
    position:relative; 
    display:inline-block; 
    padding:8px; 
} 

    .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; 
     color:white; 
     position:absolute; 
     top:13px; 
     right:10px; 
    } 

DEMO HERE

Answer 4

Правило заголовок всплывающего окна игнорировали, используя важно! Будет убедиться, что ничего не может заменить его можно просто положить это правило в конце таблицы стилей.

.pop-header 
    { 
     width: 100%; 
     background-color: #000 !important; 
     height: 50px; 
     padding: 20px; 
    }