JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="http://www.ecemtente.com/js/jquery.easing.1.3.js"></script>
<a href="#" id="tiklasana">Tıkla 2</a>
<div id="backgroundPopup"></div>

<div id="popupContact">içerisi</div>

CSS

body { margin:0; padding:0; }
#backgroundPopup{
display:none;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}




#popupContact{
    top:-500px;
/*display:none;*/
/*position:fixed;*/
position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}

JavaScript

//Click the button event!
	$("#tiklasana").click(function(){ 
        
        
        loadPopup(); 
    
    
    
    
    });








	$("#backgroundPopup").click(function(){ disablePopup(); });
    var popupStatus = 0;

function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
        
        //$("#popupContact").animati("top:");
        
        
 $( "#popupContact" ).animate({
    top: "+0"
  }, 500, "easeOutQuad", function() {
    // Animation complete.
  });        
        
        
        
        
        
        
        
        
		popupStatus = 1;
	}
}


//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		
        
        
        $( "#popupContact" ).animate({
    top: "-500"
  }, 500, "easeOutQuad", function() {
    // Animation complete.
  });        

        
        
        
        
        
        
		popupStatus = 0;
	}
}



//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}