6

だから私は次の記事を読んでいました：CSS3でモーダルウィンドウを作成する

ただし、サイトに複数のモーダル ボックスを追加して変更したいと考えています。

元のモーダルのコードは次のとおりです。

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>etc..etc..</p>
</div>

複数のモーダルを作成するには<div id=openModal" 、div を次のように変更することを想定しています。<div id=openModal2" class="modalDialog2">

スタイリングは modalDialog ボックスでのみ行われるため、2 番目のモーダルについては、そのクラス名も変更すると想定します。

ただし、これを行うたびに、モーダルボックスは開きません。

これが私のコードです：

<a href="#openModal1">Box 1</a>

<div id="openModal1" class="modalDialog1">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box 1</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.    </p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<a href="#openModal2">Box 2</a>

  <div id="openModal2" class="modalDialog2">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box 2</h2>
    <p><strong>Box 2</strong></p>
    <p>yadda yadda</p>
</div>

ここで何が間違っていますか？

4

2 に答える 2

4

クラスを変更する必要はありません。クラスの役割は、同じスタイルを異なる要素に適用することmodalDialogです。

デモ: http://jsfiddle.net/3Vykc/

于 2012-12-14T23:22:41.897 に答える