如何更改弹出header的背景颜色？

Question

我在弹出窗口 header.I 的背景颜色中遇到问题，我正在尝试使用以下代码更改弹出窗口 header 的背景颜色，但它不起作用。弹出窗口的 header 背景颜色未采用以下 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

将您的 .pop-header class 替换为以下内容：

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

希望对您有所帮助。

Answer 2

你可以试试这个：

 .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 3

在 .modalDialog > div css 中更改颜色 background。

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

Fiddle

编辑：

如果你只想改变 header 部分的颜色，那么你应该把一个 div parent 到 .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 4

弹出 header 规则被忽略，使用 !important 将确保没有任何东西可以覆盖它您可以将此规则放在样式 sheet.

的末尾

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

如何更改弹出header的背景颜色？

How to change the background color of pop up header?

html

css

popup