Денис Васильевич

 
body.modal_opened{  }
 
.getItemModal {
  display: none; 
  position: fixed; 
  z-index: 9999999; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}
 
.getItemModal::-webkit-scrollbar {
  display: none;
}
.getItemModal {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
 
.getItemModal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 620px; 
  padding:20px;
  border-radius:8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animateshow;
  animation-duration: 0.4s;
  top:50px;
}
 
.getItemModal.hidden {
      opacity: 0;
	  transition: opacity 0.7s;	  
}
.getItemModal.hidden .getItemModal-content {
      opacity: 0;
	  transition: opacity 0.4s;
 
}
 
.getItemModal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top:5px;
  margin-right:-18px;
}
 
.getItemModal-close:hover,
.getItemModal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
 
.getItemModal-header {
  padding: 2px 10px;
  margin-top:-20px;
}
 
.getItemModal-body {}
 
.getItemModal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 
 
@keyframes animateshow {
  from {top: -300px; opacity: 0}
  to {top: 50px; opacity: 1}
}
 
 
 
 
@media (max-width: 576px){
.getItemModal-content {
	width:400px;
	box-sizing:border-box;
}
}
 
 
 

 
$(document).ready(function(){
 
 
 
 
 $(document).on("click",".get_item_modal",function()
{
 
    renderGetItemModal();
	var getItemModal = $("#getItemModal");
    $(document).on("click",".getItemModal-close",function()
    { getItemModal.addClass('hidden'); setTimeout(function(){getItemModal.remove();$('body').removeClass('modal_opened');}, 500);	 });
 
	    url = $(this).attr('href');
 
	  	$('#getItemModalWrap').load(url, '', 
		 function() {
 
			 $('body').addClass('modal_opened');
			 getItemModal.show();
 
		});	
			return false;
 
}); 
 
});	 
 
 
 
 
	renderGetItemModal = function(is_title=false) {
 
	if(!is_title){
		var header = '<h2></h2>';
	}else{
		var header = '';
	}	
 
var modalHtml = [
'<div id="getItemModal" class="getItemModal"><div class="getItemModal-content">',
 
'<div class="getItemModal-header">',
'<span class="getItemModal-close">&times;</span>',
header,
'</div>',
 
'<div class="getItemModal-body">',
'<div id="getItemModalWrap"></div>',
'</div>',
 
'</div>',
'</div>'].join('');
 
	$('#getItemModal').remove();
 
	$('body').append(modalHtml);		
 
	};