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

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

你可以尝试这个：

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

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

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

<强> Fiddle

修改

如果您想更改标题部分的颜色，那么您应该将一个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 3

用以下内容替换你的.pop-header类：

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

希望这会对你有所帮助。

Answer 4

弹出标题规则被忽略，使用！important将确保没有任何内容可以覆盖它，您可以将此规则放在样式表的末尾。

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