0

複数のdivがある以下のモーダルをどのように反転できますか？

<div id="modal">

 <div id="box1front" class="window">

  <div class="header">
   <div class="headerinner">
    <div class="modalclose"><a href="#" class="close">X</a></div>
    <div class="modalheading">Title</div>
   </div>
  </div>

  <div class="contents">
   <div class="other">
    <div class="otherinner">
     <button>View Back</button>
    </div>
   </div>
   <div class="copy">
    <div class="copyinner">
     <p>[FRONT]</p>
    </div>
   </div>
  </div>

 </div>

 <div id="box1back" class="window">

  <div class="header">
   <div class="headerinner">
    <div class="modalclose"><a href="#" class="close">X</a></div>
    <div class="modalheading">Title</div>
   </div>
  </div>

  <div class="contents">
   <div class="other">
    <div class="otherinner">
     <button>View Front</button>
    </div>
   </div>
   <div class="copy">
    <div class="copyinner">
     <p>[BACK]</p>
    </div>
   </div>
  </div>

 </div>

</div>

ボタンをクリックすると、 box1frontからbox1backに反転したいと思います。

このページには複数のモーダルがあります（明らかに、すべてが一度に開くわけではありません）。それらはそれぞれ、上記の形式に従って独自のIDを持ちます。

誰かが私を助けてくれるなら、私は大いに感謝します。

乾杯、

灰

4

1 に答える 1

0

http://blog.guilhemmarty.com/flippy/を確認してください

フリップを行う方法はわかりませんが（少しググった場合はおそらく可能です）、上記のリンクにはフリップ効果があります。jqueryフリップ効果をグーグルすると、多くの結果が得られます。コンテンツの変更は簡単です。

アップデート：

var contentVar = $('#box1back').html();

$("#flipbox").flip({
    direction:'tb',
    content: contentVar
});

そんな感じ

更新：私はいくつかの掘り下げを行いました、そしてここに実用的なサンプルがあります

http://jsfiddle.net/tvdCk/19/

于 2012-06-20T15:26:51.963 に答える