最近在尝试使用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. thinkphp学习笔记3—项目编译和调试模式

    原文:thinkphp学习笔记3-项目编译和调试模式 1.项目编译 在章节2.4项目编译中作者讲到使用thinkphp的项目在第一次运行的时候会吧核心需要加载的文件去掉空白和注释合并到一个文件中编译并 ...

  2. MVC 编程模型及其变种

    MVC 编程模型及其变种 MVC全称是Model View Controller, 这是一个模型(model)-查看(view)-调节器(controller)缩写,这是通过通用的编程模型非.MVC当 ...

  3. C＃精华（文章3版本）笔记

    C#精华(文章3版本) 跳转至: 导航. 搜索 文件夹 1 C#概述 2 数据类型 3 运算符和控制流 4 方法和參数 5 类 6 继承 7 接口 8 值类型(struct) 9 合式类型 10 异常 ...

  4. HDU Group

    Group 题目: 给出n个数,是1-n的排列.要求你每次给你一个区间求出这个区间能够被分成的小区间个数. 一个不连续的数能够被分成一个小区间.t-1,t或t,t+1表示连续. 算法: 高速做法应该是 ...

  5. Java生成CSV文件

    1.新CSVUtils.java文件: package com.saicfc.pmpf.internal.manage.utils; import java.io.BufferedWriter; im ...

  6. HDU 3415 Max Sum of Max-K-sub-sequence 最长K子段和

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=3415 意甲冠军:环.要找出当中9长度小于等于K的和最大的子段. 思路:不能採用最暴力的枚举.题目的数据量是 ...

  7. java io流之int数组数据的插入与取出

    java io流大家都非常熟悉吧,有时候假设用的不熟,对于数据的处理真的非常头疼,以下是对与int数组的处理. 以下是代码: public class Stream { private int a[] ...

  8. javascript正则表达式小数类型

    假设你要阅读并了解什么,能阅读.假设只需要结果,直接跳转到这篇文章的结尾. 有使用前需求javascript正则表达式匹配小数类型,后来,他们已经写是不完全正确的识别. 后来在网上找了很多,甚至包含一 ...

  9. PyCharm 使用简介

    PyCharm 使用简介 最近由于项目需要,领导要求使用python以方便扩展,没有办法,赶鸭子上架花了2天时间翻完了python的初级教程然后就开始写代码.有一款好的IDE可以帮助我快速上手一门新语 ...

  10. c#之函数创建和闭包

    c#之函数创建和闭包 阅读目录: 动态创建函数 匿名函数不足之处 理解c#中的闭包 闭包的优点 动态创建函数 大多数同学,都或多或少的使用过.回顾下c#中动态创建函数的进化: C# 1.0中: pub ...