zoukankan      html  css  js  c++  java
  • 前端实现---复制粘贴-并生成模态框

    复制内容到剪切板需要用到插件clipboard.min.js,这个插件是一个不需要框架和flash支持将文本复制或剪切到剪贴板,且必须要放到dist文件夹下才可以使用!

    其中data-clipboard-text属性是指定你要复制或剪切的内容,data-clipboard-action属性以指定是否要copy或cut内容。如果省略此属性,copy将默认使用。

    插件下载的官网地址:http://www.clipboardjs.cn/

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 复制粘贴 - 模态框(Modal)插件</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="./dist/clipboard.min.js"></script>
    </head>
    <body>
    复制我吧!
    <!-- 按钮触发模态框 -->
    <div><button id = "btn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-clipboard-text="复制我吧!">
        copy
    </button></div>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                    复制成功,内容为:复制我吧!
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">close
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>
    
        var clipboard = new ClipboardJS('#btn');
        clipboard.on('success', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            // alert('复制成功,您复制的链接为' + e.text);
            e.clearSelection();
        });
    
        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            // alert('复制失败')
        });
    </script>
    </body>
    </html>
    
  • 相关阅读:
    771. Jewels and Stones
    706. Design HashMap
    811. Subdomain Visit Count
    733. Flood Fill
    117. Populating Next Right Pointers in Each Node II
    250. Count Univalue Subtrees
    94. Binary Tree Inorder Traversal
    116. Populating Next Right Pointers in Each Node
    285. Inorder Successor in BST
    292. Nim Game Java Solutin
  • 原文地址:https://www.cnblogs.com/maqian/p/13353942.html
Copyright © 2011-2022 走看看