JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="source-wrap">
  <textarea name="" id="source" class="t1" cols="30" rows="20"><script src="https://www.stylecrush.io/resources/public/ads.js"></script> 
<script>
  if (StytleCrushFrame) {
    var sc = new StytleCrushFrame(window, {
      width: 300333,
      height: 250, 
      imgUrlSrc: function () { 
        return
        window.document.documentElement.querySelector('meta[property="og:image"]').getAttr 
        ibute("content")
      },
      hostUrlSrc: function () { 
        return window.location.href 
      }
    }) 
    sc.inject()
  } 
</script></textarea>
<div class="btn-groups">
  <button type="button" class="btn-source-copy">Copy script</button>
</div>
  

</div>

<div class="source-wrap">
  <textarea name="" id="source" cols="30" rows="10"><script src="https://www.stylecrush.io/resources/public/ads.js"></script> 
<script>
  if (StytleCrushFrame) {
    var sc = new StytleCrushFrame(window, {
      width: 300333,
      height: 250, 
    }) 
    sc.inject()
  } 
</script></textarea>
<div class="btn-groups">
  <button type="button" class="btn-source-copy">Copy script</button>
</div>
  

</div>


<div class="mask-wrap" id="maskWrap">
  <div class="alert-box">
    <p>Script copying is complete</p>
    <button type="button" id="btnConfirm">Confirm</button>
  </div>
</div>

CSS

.source-wrap {
  margin-bottom: 40px;
}

textarea {
  display: block;
  width: 100%;
}
.btn-groups {
  margin-top: 10px;
  text-align: center;
}
.btn-groups button {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #000;
  background: #eee;
}

.mask-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  display: none;
}
.mask-wrap.active {
  display: block;
}
.alert-box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 20px;
  text-align: center;
  background: #fff;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

JavaScript

var maskWrap = document.getElementById('maskWrap');
var sourceWrap = document.querySelectorAll('.source-wrap');

function copy(event) {
  var copyText = event.currentTarget.querySelector('textarea');
  copyText.select();
  document.execCommand("copy");
}

function popAlert() {
	maskWrap.classList.add ('active');
}

for(var i=0; i<sourceWrap.length; i++){
	sourceWrap[i].addEventListener("click", function(e){
  	if(e.target.className == "btn-source-copy") {
    	copy(e);
  		popAlert();
    }
  });
}

document.getElementById("btnConfirm").addEventListener("click", function(){
	maskWrap.classList.remove('active');
});