Flexible Modal

by soulwire

HTML

<div class="modal">
    <div class="container">
        <div class="inner">
            <div class="content"></div>
            <a class="close"></a>
        </div>
    </div>
</div>

SCSS

html, body {
    height: 100%;
    width: 100%;
}

.modal {
    
    $border: 12px;
    
    background: #f2f2f2;
    position: relative;
    height: 100%;
    width: 100%;
    
    .container {
        border: 1px dashed #ccc;
        margin-left: -$border;
        margin-top: -$border;
        position: absolute;
        height: 120px;
        width: 200px;
        left: 50%;
        top: 50%;
    
        .inner {
            border-radius: 10px;
            background: rgba(0,0,0,0.3);
            position: relative;
            padding: $border;
            display: block;
            height: 100%;
            width: 100%;
            left: -50%;
            top: -50%;
    
            .content {
                border-radius: 5px;
                background: #fff;
                height: 100%;
                width: 100%;
            }
            
            .close {
                $size: 20px;
                border-radius: $size;
                border: 4px solid #fff;
                background: fadeout(#252525,0.5);
                position: absolute;
                display: block;
                height: $size;
                width: $size;
                right: $border - $size / 2;
                top: $border - $size / 2;
            }
        }
    }
}

JavaScript

$(function() {
    
    var $container = $( '.container' );

    setInterval(function() {
        $container.width( 50 + Math.abs( Math.sin( (+new Date()) * 0.0005 ) * 200 ) );
        $container.height( 50 + Math.abs( Math.cos( (+new Date()) * 0.0009 ) * 120 ) );
    }, 1000/60);
    
});