2

同じページに複数のモーダル ウィンドウが必要です。基本的には、各チーム メンバーへのリンクを作成し、クリックするとモーダル ボックスに詳細が表示されるようにするつもりです。私はzurbによる公開プラグインを使用しています。これはウェブサイトの例です。

html:

<div id="myModal" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

js

$('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').reveal();
     });
4

2 に答える 2

3

私はまさにこの正確なことをしました。もっと複雑だと思っていたので、間違った場所を探し続けました。すべて HTML で処理されます。

まず、作成したい数のモーダルに対して上記で投稿したコードを複製し、「div id」をそれぞれに一意にします (上記の例に従います)。

<div id="JOE" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

<div id="MARY" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

<div id="ANN" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

次に、対応するリンクを作成してそれぞれを起動し、一意の「data-reveal-id」値を上記で作成した ID と一致させ、レイアウト内の必要な場所に配置します。

<a href="#" data-reveal-id="JOE" data-animation="fade">JOE</a>
<a href="#" data-reveal-id="MARY" data-animation="fade">MARY</a>
<a href="#" data-reveal-id="ANN" data-animation="fade">ANN</a>

各リンクは、一致する id タグを持つモーダルのみをトリガーします。

私が言ったように、私が思っていたよりもはるかに簡単です。:)

于 2013-03-27T16:23:25.397 に答える
-1

複数のウィンドウでこのプラグインを試してください。最小化、最大化、移動、閉じる、オーバーレイ、メニューなど:

http://des.delestesoft.com:8080/?go=3

于 2012-12-27T04:45:48.737 に答える