<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);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.