Modal CSS

by 2jddfsjad

HTML

<a href="#modal" class="js-modal-trigger">Modal</a>
<div id="modal" class="md-modal">
    <div class="md-content">
        <a title="Fermer" class="md-close" type="button"><span>×</span></a>
        Test
    </div>
</div>
<div class="md-overlay"></div>

CSS

/* Modal */
.md-modal {position:fixed; top:50%; left:50%; z-index:20; width:90%; max-width:520px; text-align:center; visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);}
.md-overlay {position:fixed; top:0; left:0; z-index:9; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(255,255,255,0.7); -webkit-transition: opacity 0.3s; transition: opacity 0.3s;}

.md-show {visibility:visible;}
.md-show ~ .md-overlay {opacity:1; visibility:visible;}

.md-content {position:relative; padding:30px; background:white; text-align:left; box-shadow:0 2px 6px rgba(0, 0, 0, 0.75);}
	.md-close {position:absolute; right:0; top:0; z-index:10; -webkit-transition: opacity 0.3s; transition: opacity 0.3s;}

JavaScript

$('.js-modal-trigger').each(function(index) {
    var modalID 		= $(this).attr('href'),
        overlay 		= $(modalID).next('.md-overlay'),
        modalContent 	= $(modalID).find('.md-content'),
        close 			= $(modalID).find('.md-close');
    
    $(this).click(function(e) {
        $(modalID).addClass('md-show');
        return false;
    });
    
    close.click(function(e) {
        e.stopPropagation();
        $(modalID).removeClass('md-show');
    });
    
    overlay.click(function(e) {
        e.stopPropagation();
        $(modalID).removeClass('md-show');
    });
});