最近在尝试使用bootstrap的模态框

使用模态框主要要引入一下几个js和css:

bootstrap.css

jquery.1.9.1.js(这个可以灵活选择)

bootstrap.js

html页面的写法如下:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

    <script  src="bootstrap/js/jquery.1.9.1.js"></script>

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

在写模态框的时候使用的class主要有:

modal hide fade in

modal-header

modal-body

modal-footer

此外必要的部分还需要设置data-dismiss="modal"

以下是实例:

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

    <title>bootstrap拟态框</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

    <script  src="bootstrap/js/jquery.1.9.1.js"></script>

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

</head>    

<body>

    <div class="container">

        <h2>我是拟态框的例子</h2>

        <div id="example" class="modal hide fade in" style="display:none;">

            <div class="modal-header">

                <a class="close" data-dismiss="modal">X</a>

                <h3>我是拟态框的头部</h3>

            </div>

            <div class="modal-body">

                <h4>我是拟态框的中间部分</h4>

                <p>我是描述部分</p>

            </div>

            <div class="modal-footer">

                <a href="#" class="btn btn-success">成功</a>

                <a href="#" class="btn" data-dismiss="modal">关闭</a>

            </div>

        </div>

        <p>

            <a href="#example" data-toggle="modal" class="btn btn-primary btn-large">点我弹出拟态框</a>

        </p>

    </div>

</body>

</html>

效果图如下:

在测试实例的时候,遇到了TypeError: $ is not a function 这样的错误.纠结了半天.后来想起了js的预加载机制,于是调换了下bootstrap.js和jquery.js的顺序.即把jquery放在前面,就可以避免此问题的出现了.希望对大家有帮助.

Bootstrap 模态框(也可以说的弹出层)的更多相关文章

  1. Bootstrap告警框（alert）实现弹出效果和短暂消失后上浮消失

    最近用到bootstrap的告警框时发现只有html的说明,就自己写了一个弹出告警框和弹出短暂显示后上浮消失的告警框. 直接上JS代码了,可以copy过去直接用(使用bootstrap的UI框架的情况 ...

  2. Bootstrap 模态框

    Bootstrap 模态框(也可以说的弹出层) 最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可 ...

  3. layer弹出层详解

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...

  4. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  5. OA项目之弹出层中再弹出层

    弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...

  6. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  7. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  8. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  9. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

随机推荐

  1. Systrace

    在构造函数,修复bug.完成代码后,你应该花一些时间来专注于应用性能.应用视频像素和运行的运行速度和流畅度影响用户体验.         Android应用执行在一个共享资源的环境中,你的应用的性能会 ...

  2. OCP读书笔记(23) - 题库(ExamC)

    200.Which operation requires that you create an auxiliary instance manually before executing the ope ...

  3. ftp设置（2015-04-04）[转]

    anonymous_enable=YES /允许匿名访问 12行local_enable=YES /允许本地用户访问(/etc/passwd中的用户) 15行write_enable=YES /允许写 ...

  4. jquery扩展

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  5. ASP.NET MVC 文件上传和路径处理

    ASP.NET MVC 文件上传和路径处理总结 目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传 ...

  6. MySQL编程(0) - Mysql中文乱码问题解决方案

    MySQL 5.6 for Windows 解压缩版配置安装: http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html MySQL ...

  7. ENode 2.0

    ENode 2.0 - 介绍一下关于ENode中对Command的调度设计 摘要: CQRS架构,C端的职责是处理从上层发送过来的command.对于单台机器来说,我们如何尽快的处理command呢? ...

  8. 【iOS开发-48】九宫格布局案例：自己主动布局、字典转模型运用、id和instancetype差别、xib反复视图运用及与nib关系

    本次九宫格案例: (1)导入app.plist和各种图片素材,方便兴许开发.实际开发中,也是如此. (2)把plist中数组导入进来. --由于本案例中app.plist终于是一个数组,数组里面是字典 ...

  9. applet授权数字签名

    一.压缩你的class类文件为jar包 1.如果你的须要压缩的类文件存在的包为:cn.mbq.test1和cn.mbq.test2 2.进入你的classes文件夹,在DOS窗体中运行命令:jar c ...

  10. SSAS系列——【06】多维数据（创建Cube）

    原文:SSAS系列--[06]多维数据(创建Cube) 1.文件类型说明 项目定义文件 (.dwproj).项目用户设置 (.dwproj.user).数据源文件 (.ds).数据源视图文件 (.ds ...