JSFiddle - React, Tailwind, and code Playground

by yongho kim

HTML

<a href="#" class="openLayer">레이어 열기</a>

<div class="layerWrap">
	<div class="layerContainer">
		<div class="layerHead">레이어 제목</div>
		<a href="#" class="firstClose layerClose">닫기</a>
		<div class="layerCon"><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a></div>
		<a href="#" class="lastClose layerClose">닫기</a>
	</div>	
</div>

CSS

*{margin:0;padding:0;}
a:foucs{border:1px solid red;}
.layerWrap{display:none;position:absolute;top:100px;left:100px;border:2px solid red;width:300px;}
.layerWrap .layerContainer{position:relative;background:#fff;overflow:hidden;}
.layerWrap .firstClose{position:absolute;top:0px;right:0px;}
.layerWrap .lastClose{position:absolute;bottom:-999px;right:0px;}
.layerWrap .lastClose:focus, .lastClose:active{bottom:0px;}

JavaScript

$(function(){
	$(".openLayer").on("click", function(){
		$(".layerWrap").attr("tabindex", "0").show().focus();
		$(".layerClose").click(function(){
			$(".layerWrap").removeAttr("tabindex").hide();
			$(".openLayer").focus();
		});
		$(".lastClose").focus(function(){
			$(".layerWrap").append("<a href='javascript:void(0);' class='linkAppend'></a>");
			$(".linkAppend").focus(	function(){
				$(".layerWrap").attr("tabindex", "0").focus();
				$(".linkAppend").remove();
			});
		});
	});
})