模态弹出框（Modals）

这一小节我们先来讲解一个“模态弹出框”，插件的源文件：modal.js。

右侧代码编辑器（30行）就是单独引入 bootstrap 中发布出的“modal.js”文件。

样式代码：

☑ LESS版本：modals.less

☑ Sass版本：_modals.scss

☑ 编译后的Bootstrap：对应 bootstrap.css 文件第5375行～第5496行

在 Bootstrap 框架中把模态弹出框统一称为 Modal 。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>模态弹出框（Modals）</title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>

<body>

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

<div class="modal" id="mymodal">

    <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><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>

<script>

  $(function(){

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

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

    });

  });

</script>

</body>

</html>

玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框的更多相关文章

  1. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  2. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  3. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  4. bootstrap js插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  5. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  6. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  7. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  8. Bootstrap学习js插件篇之提示框

    案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...

  9. Bootstrap学习js插件篇之下拉菜单

    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...

随机推荐

  1. vim粘贴乱码的原因

    当我们在使用vim时,把复制的文字粘贴上去,有时会出现奇形怪状的错误: 第一个字符消失(原因是我们粘贴的字符直到遇见i才开始插入,i之前的字符都消失了) 解决方法:在粘贴之前,先输入i进入编辑模式 缩 ...

  2. mysql 常用命令,连接数据库,查看建表语句,批量导入数据,批量更新数据,连接查询

    1. 1)MySQL 连接本地数据库,从cmd中进入mysql命令编辑器: root root分别为用户名和密码 mysql -uroot -proot 2)MySQL 连接本地数据库,用户名为“ro ...

  3. 【LeetCode】206. Reverse Linked List (2 solutions)

    Reverse Linked List Reverse a singly linked list. click to show more hints. Hint: A linked list can ...

  4. 【DeepLearning】Exercise:Self-Taught Learning

    Exercise:Self-Taught Learning 习题链接:Exercise:Self-Taught Learning feedForwardAutoencoder.m function [ ...

  5. java中enum的应用

    package com.demo; public enum TestEnum { A("hello"), B("world"); private String ...

  6. 树莓派进阶之路 (031) -字符问题（1） - GBK汉字编码表(转)

    转载:http://blog.sina.com.cn/s/blog_8184e033010109ug.html   基本简介 GB码,全称是GB2312-80<信息交换用汉字编码字符集基本集&g ...

  7. ubuntu下安装配置minicom（解决默认的端口/dev/tty8，改不过来的问题）

    Minicom是linux下串口通信的软件,下面讲下ubuntu Minicom的安装和配置. 安装: sudo apt-get install minicom 或在新立得软件包管理器中搜索“mini ...

  8. C# WinForm开发系列 - 文章索引

    该系列主要整理收集在使用C#开发WinForm应用文章及相关代码, 平时看到大家主要使用C#来开发Asp.Net应用,这方面的文章也特别多,而关于WinForm的文章相对少很多,而自己对WinForm ...

  9. 【Android】如何获取本机号码、IMSI、EMSI

    获取本机号码: 获取本机号码,需要在配置文件中加入权限: <uses-permission android:name="android.permission.READ_PHONE_ST ...

  10. rsync的基本使用

    1,本地同步文件: rsync -avz --delete /home/ /backups/ 注意:在指定复制源时,路径是否有最后的 “/” 有不同的含义,例如: /home: 表示将整个 /home ...