1

さて、私がやりたいことは、CSS を使用してモーダル ウィンドウに似たものを作成することです。ユーザーが JS を非アクティブ化したときに、noscript タグで表示できるように、凝ったものを作成しています。

私はこのようなものを持っています:

<div id="ns-overlay">
        <section>
            <h1>¿Some title?</h1>
            <h3>Subtitle</h3>
            <p>
                Content
            </p>
        </section>
    </div>

そしてこのCSS：

#ns-overlay{
    width: 100%;
    height: 100%;
    background: rgba(52, 52, 52, 0.5);
    position: fixed;
    z-index: 10000;
    background-image: url('../imgs/ns-overlay.png');
    padding-top: 95px;
}

#ns-overlay section{
    color: #FFF;
    width: 990px;
    margin: auto;
    background: rgba(52, 52, 52, 0.9);
    padding: 10px;
    box-sizing: border-box;
}

#ns-overlay section h1,
#ns-overlay section h3,
#ns-overlay section p{
    padding: 5px;
    background: #126D4F;
    /*background: linear-gradient(135deg,  rgb(11, 104, 73) 0%, rgb(11, 78, 130) 100%);*/
    margin: 5px;
}

#ns-overlay section h1{
    width: 560px;
    background: #126D4F;
}

#ns-overlay section h3{
    width: 510px;
    background: #0B4F82;
}

#ns-overlay section p{
    background: none;
}

JSFiddle の例

私が実際にしたいのは、ユーザーがオーバーレイをクリックしたときにオーバーレイを非表示にすることです。

4

2 に答える 2

2

:target 擬似要素を使用して、目的の効果を達成できる場合があります。div をアンカーに変更し、ID を参照します。

<a href="#ns-overlay" id="ns-overlay">
  <section>
    <h1>Some title</h1>
    <h3>subtitle.</h3>
    <p>Content</p>
  </section>
</a>

次に、ターゲットで #ns-overlay を display:none に設定します。

#ns-overlay:target {
  display:none;
}

JSFiddle の例

于 2013-10-17T04:34:19.630 に答える
0

あなたが何をしようとしているのか理解できれば、CSS はこの種のイベントでは機能しないというのが私の答えです。クリック イベントを操作するには、javascript を使用する必要があります。

于 2013-10-17T02:32:25.470 に答える