0

HTMLに1 つのモーダルがあるため、次の CSS を作成しました。ページで使用されるクラスは 1 つだけなので、クラスではなく ID を指定しました。

#modal {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 900px; 
    height: 300px;
    margin: auto;
}
  • 私のページ「件名」では、モーダルの幅を 900px、高さを 300px にしたいと考えています。これを処理する方法は、CSS の幅と高さに 900/300 を指定し、件名の id を使用することだと思います。
  • 私のページ「都市」では、モーダルの幅を 800px、高さを 300px にしたいと考えています。これを処理する方法は、CSS の幅と高さに 800/300 を指定し、件名の id を使用することだと思います。

このために CSS スタイルを処理するための最良の方法は何ですか? 1つの解決策は、モーダルをクラスにしてから、さまざまなサイズにidを使用することです。しかし、ページに 1 回しか表示されないものをクラスとして作成するのは適切ではないようです。

CSS で「modal-subject」と「modal-city」の ID を取得し、CSS セレクターを使用して「modal」と「-city」を選択して、CSS がこれを処理できるようにする方法はありますか?

アップデート：

セレクター [class^="span"] は何をしますか? これに対する解決策かもしれません。

4

4 に答える 4

1

各ページには、ページの名前をクラスとして持つモーダルのラッパーがあります。または、body タグを使用できます。たとえば、

<body class="page-subject"> <!-- for the city page class would be "page-city" -->
 <div id="modal"></div>
</body>

そして、次のようにして、対象ページのモーダルを選択します。

.page-subject #modal{ background:red; }

都市ページの場合、クラスpage-cityを持つラッパーがあり、CSS で同じ方法で選択します。

.page-city #modal { background:magenta; }

于 2013-10-29T08:22:03.593 に答える
0

divIDを持つコンテナーがある場合はcity、次の css を試すことができます。

#city #modal {
   width: 800px; 
}
于 2013-10-29T08:21:49.840 に答える
0 
<div id="modal" class="subject">
</div>
<div id="modal" class="city">
</div>

そしてあなたのスタイルシートで

.city{
widht:800px !important;
}
.subject{
widht:900px !important;
}
于 2013-10-29T08:23:55.320 に答える
0

クラスを使用して #modal を補完できます

たとえば、 #model は次のようになります。

#modal {
position: fixed;
height: 300px;
z-index: 1050;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

そして、2つのクラスがあります：

#modal.small { width: 800px;}
#modal.big { width: 900px; }

これで、次のようにモーダルを呼び出すことができます:

<div id="modal" class="big">content</div>
于 2013-10-29T08:24:08.883 に答える