JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
	<div id="rbox"><a class="go">先逛逛>></a></div>
	<div id="mask"></div>
	
	<div class="content">	
		<div id="usertie">
			<span>
				<a id="register" href="#" onclick="return false;">注册</a>
			</span>
	    </div>
		The Suicide. 
		Meanwhile Monte Cristo had also returned to town with Emmanuel and Maximilian. Their return was cheerful. Emmanuel did not conceal his joy at the peaceful termination of the affair, and was loud in his expressions of delight. Morrel, in a corner of the carriage, allowed his brother-in-law's gayety to expend itself in words, while he felt equal inward joy, which, however, betrayed itself only in his countenance. At the Barriere du Trone they met Bertuccio, who was waiting there, motionless as a sentinel at his post. Monte Cristo put his head out of the window, exchanged a few words with him in a low tone, and the steward disappeared. "Count," said Emmanuel, when they were at the end of the Place Royale, "put me down at my door, that my wife may not have a single moment of needless anxiety on my account or yours." 
		"If it were not ridiculous to make a display of our triumph, I would invite the count to our house; besides that, he doubtless has some trembling heart to comfort. So we will take leave of our friend, and let him hasten home." 
		"Stop a moment," said Monte Cristo; "do not let me lose both my companions. Return, Emmanuel, to your charming wife, and present my best compliments to her; and do you, Morrel, accompany me to the Champs Elysees." 
		"Willingly," said Maximilian; "particularly as I have business in that quarter." 
		"Shall we wait breakfast for you?" asked Emmanuel. 
		"No," replied the young man. The door was closed, and the carriage proceeded. "See what good fortune I brought you!" said Morrel, when he was alone with the count. "Have you not thought so?" 
		"Yes," said Monte Cristo; "for that reason I wished to keep you near me." 
		"It is miraculous!" continued Morrel, answering his own thoughts....

CSS

a{ text-decoration:none; color:#fff;}
#rbox{ 

	width:620px; 
	height:420px; 
	position:fixed; 
	top:50%; 
	left:50%; 
	margin:-210px 0 0 -310px; 
	border-radius:8px; 
	background-color:#999; 
	z-index:3;
	display:none;	
}

.go{ 

	position:absolute;
	right: 10px;
	top: 10px;
	padding: 5px 12px;
	background: rgba(0,0,0,.4);
	box-shadow: 0 0 0 2px rgba(255,255,255,.4);
	color: #fff;
	border-radius: 26px;
}

#mask{ 

	background-color:#000; 
	position:absolute; 
	top:0; 
	left:0; 
	display:none;
	z-index:2;

}

#register{ z-index:1; color:blue;}
.content{ width:800px; height:auto; margin:0 auto;}

JavaScript

$(function(){
	
	//点击注册
	$("#register").click(function(){
	
		if(window.screen.availHeight > $(document.body).outerHeight(true)){
		
			//当屏幕可用工作区域的高度 > 浏览器当前窗口文档body的总高度 包括border padding margin时( 缩放时 )
			$("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
		}else{
		
			$("#mask").show().css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
		}			
		$("#rbox").show();		
	});	


	//根据浏览器可视窗口的变化调整遮罩的宽度和高度,使遮罩充满浏览器
	$(window).resize(function(){			

		//获得遮罩宽度,并去掉"px"得到数字
		var maskwidth = $("#mask").css("width");
		var widthlen = maskwidth.length;
		var swnum = parseInt(maskwidth.substr(0,widthlen-2));

		//获得遮罩高度,并去掉"px"得到数字
		var maskheight = $("#mask").css("height");
		var heightlen = maskheight.length;
		var shnum = parseInt(maskheight.substr(0,heightlen-2));

		//根据浏览器窗口变化改变遮罩宽度和高度,使遮罩充满整个浏览器	
		if(("#mask").show()){

			$("#mask").css("width","100%");		

			if(window.screen.availHeight > $(document.body).outerHeight(true)){
			
				$("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
			}else{
			
				$("#mask").show().css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
			}
		}
	});

	$(".go").click(function(){
	
		$("#mask").hide();
		$("#rbox").hide();
	});
});