Modal window v2 (FIXED HTML)

Динамическое окно (В JS)

by Богдан Криворучко

HTML

<div class="inner-block">
    <span class="win">Открыть</span> 
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

.inner-block {
    background-color: green;
    height: 300px;
    text-align: center;
}

.win {
    background-color: #C0C0C0;
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0 0;
}

.window {
    background-color: red;
    height: 200px;
    width: 200px;
    position: absolute;
    display: none;
}

JavaScript

$(document).on('click', '.win', function(){
    var win_block = $(this).next();
    if(win_block.hasClass('open')) {
        win_block.slideUp(1000, function(){
         win_block.remove();   
        });
    } else {
        $(this).after('<div class="window open"><input type="text"><br><input type="text"></div>');
     $(this).next().fadeIn(1000);
    }
   win_block.toggleClass('open');
    
});