Question

如何翻转下面有多个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，遵循上述格式。

如果有人能够帮助我，我将不胜感激。

干杯，

灰

Answer 1

检查http://blog.guilhemmarty.com/flippy/

我不知道怎么做翻转（可能如果我google了一点）但上面的链接有翻转效果，如果你谷歌jquery翻转效果有很多结果。改变内容很容易。

更新

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

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

像这样的东西

更新：我做了一些挖掘，这是一个工作样本

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

如何翻转包含多个div的模态？

1 个答案: