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 回答