bootstrap modal彈出框實現及實現按鈕點選複製功能
阿新 • • 發佈：2019-01-25
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>B遊匯</title> <link rel="stylesheet" href="__PUBLIC__/css/modules/materialadmin/css/theme-default/bootstrap-1422823238.css" > </head> <body> <input type="text" name="agent" id="agent" value="http://www.baiidu.com"> <p><a class="button button-round lr-button lr-button-1" id="copy">複製連結</a></p> <button type="button" class="btn btn-primary" id="copy3">點選複製</button> <h2>建立模態框（Modal）</h2> <!-- 按鈕觸發模態框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" >開始演示模態框</button> <!-- 模態框（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">×</button> <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4> </div> <div class="modal-body">在這裡新增一些文字</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="copy2">點選複製</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <script src="__PUBLIC__/js/modules/materialadmin/libs/jquery/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="__PUBLIC__/js/modules/materialadmin/libs/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="__PUBLIC__/js/modules/materialadmin/libs/zclip/jquery.zclip.js"></script> <script type="text/javascript"> $('.btn-lg').click(function(){ $('#myModal').modal('show'); $('#myModal').on('shown.bs.modal', function () { $('#copy2').zclip({//模態彈出框中實現點選複製//模態彈出框中實現點選複製 path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf", copy: function(){ return $('#myModalLabel').html(); } }); }) }); $('#copy').zclip({ //a標籤中實現點選複製path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf", copy: function(){ return $('#myModalLabel').html(); } }); }) }); $('#copy').zclip({ //a標籤中實現點選複製 path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf", copy: function(){ return $('#agent').val(); } }); $('#copy3').zclip({ //button中實現點選複製path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf", copy: function(){ return $('#myModalLabel').html(); } }); </script> </body> </html>path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf", copy: function(){ return $('#agent').val(); } }); $('#copy3').zclip({ //button中實現點選複製 path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf", copy: function(){ return $('#myModalLabel').html(); } }); </script> </body> </html>
$('#myModal').on('shown.bs.modal', function () {
if($('#copy2').parent().find('.zclip').length<=0){
$('#copy2').zclip({
path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf",
copy: function(){
return $('#myModalLabel').html();
},
afterCopy: function(){
alert('複製成功')
}
});
}
})