[jQuery]버튼 클릭 후 url 복사 / toastPopup

[조건]

1. 버튼 클릭 시 url 이 복사됩니다.

2. 버튼 클릭하는동안  버튼의 배경색에 opacity가 들어가야합니다.  

3. 복사와 함께 복사되었습니다. 라는 토스트 팝업이 잠시 나왔다가 사라집니다.

 

 

[html]

1. 링크복사 버튼은 css로 모양을 만들어줄 예정입니다.

2. 토스트 팝업은 잠시 숨겨둘 예정입니다.

 

<span class="shareLinkArea">
	<input type="text" name="referralUrl" value="주소가들어갑니다" id="shareLink" readonly>
	<span class="copyShareLink">링크복사</span>
</span>
<div class="toastPopup hide">
   <p>링크가 복사되었습니다.</p>
</div>

[css]

1. 버튼<span>에 :active를 활용하여 클릭하는 동안 배경색에 opacity를 적용합니다.

* : active :: 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.

 

[참고]

https://developer.mozilla.org/ko/docs/Web/CSS/:active

:active - CSS: Cascading Style Sheets | MDN

.shareLinkArea input{
    border: 1px solid #000000;
    width: 210px;
    height: 24px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    line-height: 24px;
    padding-left: 15px;
    background-color: #fffdee;
}

.shareLinkArea span{
    display: inline-block;
    height: 28px;
    vertical-align: bottom;
    margin-left: -4px;
    cursor: pointer;
    width: 60px;
    background: #000;
    color:#FFF400;
    border-radius: 0 50px 50px 0;
    text-align: center;
    line-height: 28px;
    font-weight: 400;
    font-size: 12px;
}

.shareLinkArea span:active{
    background: #000;
    opacity: 0.5;
    font-weight: 700;    
}

.toastPopup {
    width: 223px;
    height: 38px;
    background: #4f95d0;
    border-radius: 4px;
    position: absolute;
    top: -35%;
    left: 50%;
    margin-left: -112px;
}

.toastPopup p{
    font-size: 14px;
    color:#fffdee;
    line-height: 38px;
    text-align: center;
}

.hide {
	display : none;
}

 

[jQuery]

1 document.execCommand("copy")를 활용하여 url을 복사합니다.

[참고]

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

Interact with the clipboard - Mozilla | MDN

2. 팝업창을 fadeIn, fadeOut 을 활용해여 서서시 나타났다 사라지게 합니다.

* .fadeIn()은 선택한 요소를 서서히 나타나게 합니다.

* fadeOut()은 선택한 요소를 서서히 사라지게 합니다.

$('.copyShareLink').on('click', function () {
   var copyShareLink = $('#shareLink');
   copyShareLink.select();
   document.execCommand("Copy");
   $('.toastPopup').fadeIn(400).delay(400).fadeOut(400);
});