css jQuery Simple Modal Popup

Posted 2021-05-13

(function modal(){
	
	$("[data-modal]").on("click", function(e) {	
		var modal = $("#" + $(this).data("modal"));
		modal.fadeIn();
		$("#modal-overlay").css({'filter' : 'alpha(opacity=70)'}).fadeIn();
		var modalTopMargin = (modal.outerHeight()) / 2;
		var modalLeftMargin = (modal.outerWidth()) / 2;
		if(!modal.hasClass("autoheight")){
			modal.css({
				'margin-top' : -modalTopMargin,
				'margin-left' : -modalLeftMargin
			});	
		}
		e.preventDefault();
	});	
	$('#modal-overlay, .modal-close').on("click", function() {
		$('#modal-overlay, .modal').fadeOut();
	});
	
})();

.modal{ display:none; position:fixed; width:600px; left:50%; top:50%; margin-left:-300px; z-index:16000; background:#fff; border-radius: 6px; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.7); border: 1px solid #363636;}

.modal .modal-header{ margin:10px 15px; border-bottom:1px solid #393939; padding-bottom:10px; font-family: arial; text-transform:uppercase; font-size:18px; letter-spacing:1px;}

.modal .modal-close{ background:url(../images/sprite.png) no-repeat 0 -347px; width: 27px; height: 27px; position:absolute; right:15px; top:9px; opacity:0.5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

.modal .modal-close:hover{ opacity:1; cursor:pointer;}

.modal .modal-content{ margin: 10px 15px 20px;} 

#modal-overlay {  position: fixed;  left: 0;  right: 0;  top: 0;  bottom: 0;  background: rgba(0,0,0, 0.6);  z-index: 15000;  display: none;}