Как я могу перевернуть модальный, содержащий несколько div?

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 при нажатии на кнопки.

На этой странице представлено несколько модальных файлов (очевидно, не все сразу открываются). Каждый из них будет иметь свои идентификаторы, следуя приведенному выше формату.

Буду признателен, если кто-то сможет мне помочь.

Cheers,

Ash

Answer 1

Проверить http://blog.guilhemmarty.com/flippy/

Я не знаю, как это сделать флип (вероятно, может если я гугле немного), но ссылка выше, имеет эффект флип, если вы google jquery flip effect, есть много результатов. изменить содержание легко.

Update:

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

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

Что-то вроде этого

Update: я сделал некоторые копали и вот рабочий образец

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