<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="wrap">
<div class="box">
<div id="text">
<span>행복도 내가 만들고,<br>불행도 내가 만든다.<br>-법률스님-</span>
</div>
<button>COPY</button>
<input type="text" id="copy_text">
</div>
</div>
<div class="alertbox">
<div class="box">
클립보드에 복사 되었습니다.
</div>
</div>
*{margin:0; padding:0; box-sizing:border-box;}
#wrap{display:flex; align-items: center; justify-content:center; height:100vh; width:100%; background-color:#ccc;}
.box{width:80%; height:300px; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:15px; overflow:hidden; background-color:#fff;}
#text{margin:auto; padding:2%; text-align:center; display:flex; align-items: center; justify-content:center; height:80%; }
button{margin:auto; display:block; border-radius:50%; width:50px; height:50px; background-color:#ccc; cursor:pointer; border:0; box-shadow:0 0 10px rgba(0,0,0,0.9)}
.alertbox{background-color:rgba(0,0,0,0.7); position:fixed; display:flex; align-items: center; justify-content:center; height:100vh; width:100%; top:0; left:0; transition:1s; opacity:0; z-index:-1;}
.alertbox .box{display:flex; align-items: center; justify-content:center; opacity:0.7;}
input{opacity:0;}
$('button').click(function(){
const copy = document.getElementById('copy_text');
$(copy).val($('#text span').text());
copy.select();
document.execCommand( 'Copy' );
$('.alertbox').css('opacity','1');
$('.alertbox').css('z-index','1');
setTimeout(()=>{
$('.alertbox').css('opacity','0');
$('.alertbox').css('z-index','-1');
},1000);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.