$('resize').addEvent('click', function(){ if (this.hasClass('on')){ this.removeClass('on') $('modal-content').tween('width', 300); } else { this.addClass('on') $('modal-content').tween('width', 100); } })
<button id="resize">Test Content Adaptability</button> <table id="modal"> <tbody id="modal-tbody"> <tr id="modal-tr"> <td id="modal-td"> <div id="modal-content"> <div id="modal-body"> Some modalicious content here for your viewing pleasure. It centers itself no matter what the size or how the amount of content you add to the modal, how fun! </div> </div> </td> </tr> </tbody> </table>
html, body { height: 100%; } #modal { position: fixed; top: 0; left: -100%; height: 100%; width: 100%; background: red; } #modal-tbody, #modal-tr, #modal-td { height: 100%; } #modal-td { vertical-align: middle; } #modal-content { position: relative; left: 100%; height: auto; width: 50%; max-width: 225px; min-width: 80px; max-height: 80%; min-height: 80px; margin: 0 auto; border: 1px solid; background: #eaeaea; overflow: auto; }