<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Alert_Box</title> <style type="text/css"> .copy { /*background: #F9F9F9;*/ padding: 30px 0; margin: 0 auto; } .copy li { color: #636363; line-height: 1.2em; padding-top: 10px; font-weight: 500; padding: 5px 20px ; -webkit-transition: all .2s ease; transition: all .2s ease; position: relative; overflow: hidden; box-sizing: border-box; width: 100%; border-bottom: 1px solid #EFEFEF; padding-bottom: 10px; } .copy li:first-child { border-top: 1px solid #EFEFEF; } .copy li:hover { background-color: #EFEFEF; } .copy li:hover:after { bottom: 0; } .copy li:hover .copy-btn { opacity: 1; right: 0; } .copy li .copy-btn { position: absolute; opacity: 0; cursor: pointer; top: 0; text-align: center; -webkit-transition: all .2s ease; transition: all .2s ease; right: -100%; bottom: 0; padding: 15px; background-color: #636363; color: #fff; text-transform: uppercase; font-size: 10px; font-weight: 600; border: none; outline: none; width: 131px; } .copy li .copy-btn:before { content: ""; /*width: 20px;*/ height: 100%; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position-y: center; } .copy li .copy-btn:after { content: "点我复制"; display: inline-block; vertical-align: middle; } .success { position: absolute; right: 0; cursor: pointer; width: 131px; top: 0; font-size: 12px; text-align: center; font-style: normal; bottom: 0; padding: 15px; background-color: #E93937; color: #fff; text-transform: uppercase; -webkit-transition: all .1s ease; transition: all .1s ease; font-weight: 600; -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); border-radius: 100%; } .success:before { content: ""; /*width: 20px;*/ height: 100%; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position-y: center; } .success:after { content: "已复制!"; display: inline-block; vertical-align: middle; } .success.show { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); border-radius: 0; } .p-success:hover { border: 2px solid #E93937; } .p-success:before { content: "已复制"; background: #E93937; width: 92px; text-align: center; } .copy p { margin-bottom: 0; color: #989898; padding-left: 20px; } </style> </head> <body> <div style="width:500px;heigth:500px"> <div class="copy-content">发生大幅杀跌</div> <button onclick="copyFull()" class="copy-btn">注册</button> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </div> <script type="text/javascript"> function copyFull() { //copys inner html of target div. //event button var copyBtn = $('.copy-btn'); copyBtn.on('click', function(event) { var $this = $(this); //find the element that has the text you want. var content = $this.prev('.copy-content'); //creates new range object and sets text as boundaries. var range = document.createRange(); range.selectNode(content[0]); window.getSelection().addRange(range); try { // Now that we've selected the text, execute the copy command var successful = document.execCommand('copy'); /*var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg);*/ //handle success $(this).after('<span class="success"></span>'); setTimeout(function() { $('.success').addClass('show'); setTimeout(function() { $('.success').fadeOut(function() { $('.success').remove(); }); }, 1000); }, 0); } catch (err) { //console.log('Oops, unable to copy'); } //clear out range for next event. window.getSelection().removeAllRanges(); }); } $(function() { copyFull(); }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 复制到剪贴板(虽然兼容性很差) 喜欢 (2)or分享 (0)
