最近在学习web端开发相关，bootstrap非常好用！

有个模态弹出窗的效果，在此记录下：

1、导入：

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

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

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

2、具体代码实现：

<body>

    <button class="btn btn-primary" type="button">点击我</button>

    <div class="modal fade" id="myModel">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">

                        <span aria-hidden="true">&times;</span>

                        <span class="sr-only">Close</span>

                    </button>

                    <h4 class="modal-title">模态弹出窗标题</h4>

                </div>

                <div class="modal-body">

                    <p>模态弹出窗主题内容</p>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    <button type="button" class="btn btn-primary">保存</button>

                </div>

            </div>

        </div>

    </div>

    <script>

        $(function () {

            $(".btn").click(function () {

                $("#myModel").modal("toggle");

            });

        });

    </script>

</body>

效果如下：

HTML5开发之 -- 模态突出窗（bootstrap）的更多相关文章

  1. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  2. 2017年最重要的HTML5开发手册，传播正能量

    今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的HTML5进阶学习一点资讯群:250777811,里面 ...

  3. 浅谈App原生开发、混合开发及HTML5开发的优劣

    App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...

  4. 2018年最重要的HTML5开发手册，传播正能量

    今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的web前端/HTML5/javscript技术学习群: ...

  5. HTML5开发常见的7个框架，你知道几个？

    互联网的迅速发展,软件行业成了更多年轻人的就业选择.HTML5简单易学门槛低,是Web时代前端开发超好用的工具.而HTML5开发人员的就业薪资也远远高于其他行业. 资料显示,初级HTML5开发人员的平 ...

  6. Python测试开发-创建模态框及保存数据

    Python测试开发-创建模态框及保存数据 原创: fin  测试开发社区  前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎 ...

  7. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  8. HTML5开发手机应用--viewport的作用

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  9. 你知道吗？使用任何HTML5开发工具都可开发iOS、Android原生App

    APICloud App开发平台一直在不断升级开发工具库,这一年增加了众多开发工具.目的就是让开发者可以选择使用任何自己喜欢的HTML5开发工具去开发App.这次,APICloud把所有关于开发工具的 ...

随机推荐

  1. 使用vuex保存singer每个歌星的基本信息

    1.建src/store文件夹,建立以下文件来存储歌星信息 2.state.js const state = { singer:{} } export default state 2.mutation ...

  2. CentOS 7 开放防火墙端口 命令

    iptables防火墙 1.基本操作 # 查看防火墙状态 service iptables status   # 停止防火墙 service iptables stop   # 启动防火墙 servi ...

  3. SharePoint自动化系列——Set MMS field value using PowerShell.

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 本章将总结一下设置SharePoint list中item的Managed Metadata fi ...

  4. vcpkg —— VC++ 打包工具

    引用: http://www.tuicool.com/articles/aeiYz2v vcpkg 是微软 C++ 团队开发的在 Windows 上运行的 C/C++ 项目包管理工具,可以帮助您在 W ...

  5. AM335x移植linux内核_转

    AM335x移植linux内核 该博客中详细介绍了移植linux内核到AM335x上相关,设备驱动采用设备树(DT)方式加载,包含设备启动.uboot.kernel.driver.rootfs及简单上 ...

  6. win10系统中UserManager 总是被禁用怎么解决?

    RT,也就是提示win10开始菜单和cortana无法工作.升级win10后一直被这个问题困扰,论坛也见有人发帖求助这类问题,百度了方法打开任务管理器进入服务更改User Manager启动类型为自动 ...

  7. LINQ操作符三：限制操作符

    where是限制操作符,它将过滤标准应用在序列上,按照提供的逻辑对序列中的数据进行过滤. where操作符不启动查询的执行.当开始对序列进行遍历时才开始执行,此时过滤条件将被应用到查询中. 示例: / ...

  8. 数据库 proc编程九

    第一种动态sql EXEC SQL EXECUTE IMMEDIATE :psql; .仅适用于非select语句 .嵌入SQL语句中不能包含输入宿主变量 void main() { EXEC SQL ...

  9. VHD和VHDX

    VHD和VHDX没有太大区别,只是最大容量不一样,用是一样用,一定要转用ghost11,是新建vhdx,然后把vhd和vhdx个挂载,之后用ghost11分区到分区还原. VHD和VHDX简介 相对之 ...

  10. 各个层次的gcc警告

    http://blog.csdn.net/lizzywu/article/details/9419145 各个层次的gcc警告从上到下覆盖 变量(代码)级:指定某个变量警告 int a __attri ...