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

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

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

干杯

灰烬检查

我不知道如何进行翻转（如果我用谷歌搜索一下，可能可以），但是上面的链接有翻转效果，如果你用谷歌jquery翻转效果，会有很多结果。更改内容很容易

更新：

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

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

诸如此类

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

---

你所说的翻转是什么意思？像翻转效果或只是更改内容？翻转效果，使其从显示box1front变为box1back，因此您希望模态的内容为翻转设置动画，并且翻转后，内容为box1back？是的，请。那太好了。基本上，box1front是首先显示的内容。这包含一个按钮。单击该按钮时，box1front将翻转显示box1back。谢谢。这是有用的，但不是确切的答案。我自己也曾遇到过一个类似的链接，你发现的这个链接的灵感来源于。但是，我似乎无法让它与我的HTML代码一起工作。实现似乎很简单，对于内容，您可以将HTML存储在变量中，然后将其作为内容提供。我用你提供的链接更新了我的答案，我也发现这可能对一些人有帮助。如果您不需要支持较旧的浏览器，您可以使用css3 one。到目前为止，这就是我要做的。。。现在，我只需要能够翻转它回到显示前面板。