bootstrap modal弹出框实现及实现按钮点击复制功能

最新推荐文章于 2023-07-24 22:19:55 发布
最新推荐文章于 2023-07-24 22:19:55 发布
阅读量3.6k 收藏
点赞数
分类专栏： bootstrap jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengzuchao/article/details/80616934
版权 
<!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 $('#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 $('#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>

$('#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('复制成功')

}

});

}

})

 

蒙--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 控制元素案例点击按钮显示隐藏 div
猿码互联
05-18 447
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
实现点击按钮复制文本框中文本到剪切板中的方法
热门推荐
justforuse的博客
10-29 1万+
主要代码：<textarea name="text" id="text" cols="30" rows="10"></textarea> <button onclick="myCopy()">点击复制文本框内的内容</button><br> <script> function myCopy(){ var ele = document.getElementById("text"
bootstrap提示
weixin_43293451的博客
06-18 184
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap</title> <style type="text/css"> div.d1{ padding-top:70px; } &...
Bootstrap Table 双击、单击行获取该行及全表内容
10-18
主要介绍了Bootstrap Table 双击、单击行获取该行内容及获取全表的内容,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Bootstrap模态框的基本使用2.0（复制可用）
夏已微凉、
09-12 475
Bootstrap模态框的基本使用2.0（复制可用）
Bootstrap - Table表格内容及tooltip实现鼠标悬停悬浮显示信息
Mr_WoLong
06-14 2942
Bootstrap - Table表格内容及tooltip实现鼠标悬停悬浮显示信息
Bootstrap模态框的基本使用（复制可用）
夏已微凉、
07-31 1322
                                                                               Bootstrap模态框的基本使用   前言：bootstrap基本的增删改案例，代码直接复制可用。 注意：如果没效果，可能是引用的js地址已改变。   1、效果预览         总览：         新增：  ...
bootstrap modal弹出框
u010995263的专栏
08-17 1500
最近在web开发过程中需要做一个弹出框，通过看导师的代码和上网查阅了相关资料，最后完成了这个弹出框。 具体实现功能为，当我点击日志按钮时，会出现一个弹出框，显示该日志的内容，如果点击弹出框的关闭或者右上方的退出按钮，该弹出框就会退出。 html代码，这是标准格式： js代码：这是实现的核心部分： var SAVE_DATA = { //JSON格式的数组 'logpa
bootstrap实现点击删除按钮弹出确认框的实例代码
10-18
Bootstrap提供了一个模态对话框组件（Modal），可以用来实现点击按钮后弹出确认框的效果。 在本文中，作者提供了一个使用Bootstrap框架实现点击删除按钮后弹出确认框的具体实例代码。下面将对这个实例代码中涉及的...
bootstrap modal+gridview实现弹出框效果
08-29
下面将详细介绍如何使用Bootstrap Modal和Gridview来实现弹出框效果。 在网页中加入更新操作按钮并调用Modal弹窗，是在Gridview的表单信息中点击更新按钮时，弹出填写信息表单的关键步骤。代码中的更新操作按钮部分...
JS组件Bootstrap实现弹出框和提示框效果代码
10-23
在实现弹出框和提示框的代码示例中，Bootstrap使用了模态框（Modal）和工具提示（Tooltip）组件。模态框通过一个具有特定类名的div元素来定义，通常包含一个用于关闭模态框的按钮和一个表单。在这个示例中，模态框...
点击按钮复制功能
09-14
内含点击按钮触发js，来获取需要复制内容的控件id，并复制内容。可以用在wx开发以及移动设备开发方面。希望可以帮助别人
简介BootStrap model弹出框的使用
09-02
-- Modal弹出框 --> <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal">× ...
react antd tabel tooltip 点击复制
weixin_43319667的博客
08-08 1063
jsx语法 +document.execCommand('copy') ,react tabel 点击复制
用了BootStrap的modal弹窗，vue-clipboard2虽然复制成功，可是无法粘贴
Heartsuit的博客
12-24 1144
背景 一开始用的 BootStrap 的 modal 弹窗里显示信息。 后来有了点击复制的需求，就又使用了 Toastr ，当 BootStrap 弹窗与 Toastr 弹窗这两个同时出来时， vue-clipboard2 的复制功能失效。。 解决方案 这在 vue-clipboard2 的文档中有说明的https://www.npmjs.com/package/vue-clipboard2。 可能是浏览器的限制 然而，我这里并不是这个原因。。 使用this.$copyText(val, conta
5.10 Bootstrap 按钮（Button）插件
最新发布
梁辰兴的博客
07-24 454
注意：如果您想要单独引用该插件的功能，那么您需要引用 button.js。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加单选按钮组的切换。您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加复选框组的切换。
bootstrap的使用
wen0627的博客
11-17 310
1、用bootstrap制作文章后缀徽章效果，在bootstrap中文手册组件中找到徽章，把示例的代码复制进自己新建好的html文件(要先引用bootstrap的css样式表），也可以不复制中文手册的内容，可以只把徽章的类名放入其中，示例如下。 2、制作表单组件，在中文手册组件找到表单，它上面写的很详细，也有很多样式，按照它的代码就能实现表单样式，示例如下。 3、制作警告提示框，找到警告提示框，按照示例代入进html文件。 4、文字排版的制作。 5、图片轮播分三步，一制作点击按..
关于bootstrap3中popover按钮克隆失效的问题
砖
10-06 463
问题：bootstrap3的popover按钮用jquery的clone(true)复制后
解决bootstrap模态框中使用clipboard.js无法复制的问题
MaYuKang的博客
04-12 675
当使用bootstrap调起模态框，clipboard对模态框中按钮绑定复制事件时，焦点会发生变化，需要指定焦点所在容器，也就是模态框，clipboard.js官方解释如下： 加入container属性并指明复制按钮所在模态框即可正常进行复制操作。 ...
bootstrap4弹出框
05-29
使用 Bootstrap 4 弹出框的方法如下： 1. HTML 结构中，添加一个按钮，用于触发弹出框： ``` <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开弹出框</button> ``` 2. 添加一个弹出框的容器，并设置弹出框的样式： ``` <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 弹出框头部 --> <div class="modal-header"> <h4 class="modal-title">弹出框标题</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- 弹出框主体 --> <div class="modal-body"> 弹出框内容 </div> <!-- 弹出框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button> </div> </div> </div> </div> ``` 3. 引入 Bootstrap 的 JavaScript 文件： ``` <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 这样，一个基本的 Bootstrap 4 弹出框就完成了。可以通过修改弹出框容器的样式，来调整弹出框的外观和布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值