还是上一个小项目，o(╥﹏╥)o，要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框。网上找了找，发现Bootstrap的Model弹出框可以实现该功能，因此学习了一下，实现了基本弹框功能（可拖动）。

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>测试</title>

        <link href="./src/css/bootstrap.min.css" rel="stylesheet">

        <style>

            html,body{

                width: 100%;

                height: 100%;

                padding: 0;

                margin: 0;

            }

            .div_main{

                width: 100%;

                height: 100%;

                background: gray;

            }

            .bacstyle{

                /* background: red; */

                width: 1000px;

                height: 600px;

            }

            /*当触发模态框时会产生一个阴影层覆盖整个页面，设置 modal-backdrop 可以去除阴影层*/

            .modal-backdrop {

                filter: alpha(opacity=0)!important;

                opacity: 0!important;

             }

        </style>

    </head>

    <body>

        <div class="div_main">

            <!-- botton按钮有两个属性是data-toggle="model"   data-target="#myModel"；第一个属性代表我可以调取并展示一个模态框，第二个属性表示我要展示的哪一个模态框，用id来标识-->

            <!-- data-backdrop="static"表示点击空白的地方不会关闭弹窗-->

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" >打开惊喜</button>

            <!-- class = "modal"，用来把 <div> 的内容识别为模态框  class = "fade"，当模态框被切换时，它会引起内容淡入淡出-->

            <!-- tabindex=-1代表此元素禁止使用键盘上的tab键对其导航，就是按tab键的时候，会跳过这个div    不设置tabindex的话，就会使Esc退出无效 -->

            <!-- role=“dialog”代表这是一个对话框 -->

            <!-- 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上） -->

            <div class="modal inmodal" id="myModal" role="dialog" aria-hidden="true">

                <div class="modal-dialog bacstyle">

                    <div class="modal-content" style="width: 100%;height: 100%;">

                        <!-- modal-header 是为模态窗口的头部定义样式的类 -->

                        <div class="modal-header" style="background: pink; width: 100%; height: 10%;">

                            <!-- close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式 -->

                            <!-- data-dismiss="modal"，是一个自定义的 HTML5 data 属性，在这里它被用于关闭模态窗口 -->

                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>

                            <h4 class="modal-title">窗口标题</h4>

                        </div>

                        <!-- class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式 -->

                        <div class="modal-body" style="background: green; width: 100%; height: 90%;">

                            湖人&&火箭总冠军

                        </div>

                    </div>

                </div>

            </div>

            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

            <script src="./src/js/jquery.min.js"></script>

            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

            <script src="./src/js/bootstrap.min.js"></script>

            <script src="./src/js/jquery-ui.min.js"></script>

            <script>

                // 在模态框出现后添加可拖拽功能

                $(document).on("show.bs.modal", ".modal", function() {

                    // draggable 属性规定元素是否可拖动

                    $(this).draggable({

                        handle: ".modal-header", // 只能点击头部拖动

                        cursor: 'move' //光标呈现为指示链接的指针（一只手）,

                    });

                    $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的

                });

            </script>

    </body>

</html>

点击按钮，会弹框显示，并且弹框可以拖动

运行效果如下：

注意：

Bootstrap为v3版本

相应的js插件网上都可以轻松下载

Bootstrap——可拖动模态框(Model)的更多相关文章

  1. Bootstrap Modals（模态框）

    http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...

  2. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  3. bootstrap课程11 模态框如何使用

    bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...

  4. BootStrap的动态模态框及静态模态框

    1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html&g ...

  5. bootstrap下使用模态框，在模态框内输入框中回车时，模态框自动关闭的问题及解决方法

    使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(do ...

  6. 拥Bootstrap入怀——模态框（modal）篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  7. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  8. bootstrap中的模态框（modal，弹出层）

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  9. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

随机推荐

  1. Python 列表,元组,字典

    0)字符串切片 py_str = 'python' >>>py_str[0] #取第一个字符串,返回值为"p",超出范围会报错 >>>py_st ...

  2. CSP-S 2019 —— 一个精神病人的呓语

    此生无悔入OI(话说上次的“此生无悔”还是在B站上发的弹幕2333. $HZOI$们,我们要加油!QwQ (挖坑 写在前面 学了一年,拿了$160$,也无所谓,失败者不会被人记住. 最后想做的,就是把 ...

  3. HDU-6070 Dirt Ratio（二分+线段树+分数规划）

    目录 目录 思路: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 题意:传送门  原题目描述在最下面.  求\(sum/len\)最小值.\(sum\)是一段区间内不同数字的 ...

  4. mysql 导出导入数据 -csv

    MySql数据库导出csv文件命令: mysql> select first_name,last_name,email from account into outfile 'e://output ...

  5. CPUID 指令的使用

    使用 CPUID 指令可以从 processor 厂商里获得关于 processor 的详细信息,CPUID 指令是从 Intel 486 处理器以后开始加入支持. 1. 检测处理器是否支持 cpui ...

  6. Devstack配置负载均衡，负载均衡版本V2

    本文为minxihou的翻译文章,转载请注明出处Bob Hou: http://blog.csdn.net/minxihou JmilkFan:minxihou的技术博文方向是 算法&Open ...

  7. 2019 牛客多校第三场 H Magic Line

    题目链接:https://ac.nowcoder.com/acm/contest/883/H 题目大意 给定 N 个不同的整数点,N 为偶数,求一条直线,这条直线能把这 N 个点对半分开,输出这条直线 ...

  8. C在结构体里面使用共用体

    在做链表的时候我们设计每个节点都是一个结构体,每个节点的数据用一个共用体表示,每创建malloc一个结构体节点我们也要相应的malloc共用体并把它付进去. 这是定义: typedef union E ...

  9. springboot项目大量打印debug日志问题

    目前,java下应用最广泛的日志系统主要就是两个系列: log4j和slf4j+logback . 其中,slf4j只包含日志的接口,logback只包括日志的具体实现,两者加起来才是一个完整的日志系 ...

  10. PyTorch中，关于model.eval()和torch.no_grad()

    一直对于model.eval()和torch.no_grad()有些疑惑 之前看博客说,只用torch.no_grad()即可 但是今天查资料,发现不是这样,而是两者都用,因为两者有着不同的作用 引用 ...