Bootstrap入门(二十三)JS插件1:模态框

1.静态实例

2.动态实例

3.模态框的尺寸和效果

4.包含表单的模态框

模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。

但是千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

首先我们要引入CSS文件和JS文件(bootstrap需要jQuery的支持)

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

1.静态实例

首先我们要创建一个class为modal的div

在里面再创建一个class为modal-dialog的div(这才是模态框)

模态框是分为头部,身体,和脚部

再创建一个class为modal-content的div,为内容部分

我们再创建一个身体部分,假设内容为hello world

        <div class="modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallable" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
hello world
</div>
</div>
</div>
</div>

当然,如果直接这样的话是没有任何效果的,这就是我们需要JS的时候

添加一段新的js代码(这里是用到了模态框代码的id:mymodal,可以根据自己需要修改)

(注意:使用id时,需要在前面加上“#”,不然同样是没有效果的)

     <script>
$("#mymodal").modal("show");
</script>

这样,我们就有效果了,背景变成灰色,弹出模态框

当然,这跟我们平时看到的不一样,那是因为还缺少了头部和脚部

补全代码,用<span>来承载那个“X”,用按钮的不同情境来显示效果

        <div class="modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallable" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="model-title" id="mymodallabel">这里是头部</h4>
</div>
<div class="modal-body">
hello world
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
<button type="button" class="btn btn-primary">save</button>
</div>
</div>
</div>
</div>

刷新页面,新弹出的模态框,可以按“X”或者按钮close关闭

效果:

2.动态实例

静态实例是一进入页面就弹出来的,可是一般都不会这样,

因为事实上肯定是通过一些按钮,控件来触发的

我们添加一个按钮(这里是一个正常、稍大的样式)

注意按钮里面的data-target="#mymodal"

     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">
启动模态框
</button>

刷新页面,在点击按钮后,弹出模态框,效果

3.模态框的尺寸和效果

模态框提供了三个可选尺寸(有大的,默认的,小的),通过为 .modal-dialog 增加一个样式调整类实现

同时也有份有过渡效果和没过渡效果的(只需要在class中添加或者去掉fade就可以了)

2里面的就是默认的,接下来,假设:大的,有过度效果;小的,没有过度效果

为方便,只写一点

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
启动大模态框
</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">大 有过渡</div>
</div>
</div> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
启动小模态框
</button>
<div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">小 无过渡</div>
</div>
</div>

效果,大的明显大很多,有过渡效果的是渐渐出现的,没有过度效果的是突然出现的

4.包含表单的模态框

依然是用按钮来触发,在按钮的属性中,注意data-target="#examplemodal" 和data-whatever="@ding"

data-target="#examplemodal"是对模态框所在div的调用

data-whatever="@ding"是指获取的内容是@ding

<h4>标签也有自己的id:examplemodallable

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#examplemodal" data-whatever="@ding">
open modal for @ding
</button>
<div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="examplemodallable">message</h4>
</div>
<div class='modal-body'>
<form>
<div class='form-group'>
<label for='recipient-name' class='control-label'>ASD</label>
<input class="form-control" type="text" id='recipient-name'>
</div>
</form>
</div>
<div class='modal-footer'>
<button type="button" class='btn btn-default' data-dismiss='modal'>close</button>
<button type="button" class='btn btn-primary'>send</button>
</div>
</div>
</div>
</div>

当然,现在的效果不是我们想要的,现在的效果是:

想把data-whatever的内容我们来添加到表单中,新增梯段js代码:

前面是定义变量获取相应的信息

modal.find(".modal-title").text(AAA);(这是头部内容)

modal.find(".modal-body input").val(recipient))(修改到身体部分的<input>中)

        <script>
$("#examplemodal").on("show.bs.modal", function (event) {
var button = $(event.relatedTarget)
var recipient = button.data("whatever")
var modal = $(this);
modal.find(".modal-title").text("new message to" + recipient);
modal.find(".modal-body input").val(recipient)
})</script>

刷新页面,重新点击,头部的信息和<input>里面的信息发生了变化

这就很类似用户提示,能提高用户体验

Bootstrap入门(二十三)JS插件1:模态框的更多相关文章

  1. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  2. Bootstrap <基础二十三>页面标题(Page Header)

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  3. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  4. Bootstrap入门(十三)组件7:导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

  5. Bootstrap的js插件之警告框(alert.js)

    data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...

  6. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  7. JS学习笔记(模态框JS传参)

    博主最近基于django框架的平台第一版差不多完成了 今天整理下开发过程中遇到的前端知识 基于前端bootstrap框架模态框传参问题 上前端html代码: <div class="m ...

  8. JS /CSS 实现模态框(注册和登录组件)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. JS 实现图片模态框,幻灯片,跑马灯功能

    网站中常用的幻灯片和模态框,使用 HTML.JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能.可以运用到视频网站,商城,相册上去 参考了菜鸟教程,有兴趣自己去看 HTML/ ...

  10. bootstrap table编辑操作的时候 在模态框里加载iframe页面(加载的页面是在另一个页面做编辑)的时候如何关闭模态框和刷新table

    //关闭模态框                             window.parent.$('#myModal').modal('hide'); //修改成功后刷新table表格      ...

随机推荐

  1. 最短路径问题 HDU 3790

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  2. 背景透明IE和rgba

    opacity:0.5; filter:Alpha(opacity=40); //IE8以下 当我们设置opacity透明时,opacity后代元素会随着一起具有透明性,所以我们Opacity中的文字 ...

  3. STM32开发指南-按键输入实验

    I/O口做为输入的例子.通过配置寄存器设置为输入口,检测对应寄存器的值,判读输入状态,按键是否被按下.

  4. Task Cancellation: Parallel Programming

    http://beyondrelational.com/modules/2/blogs/79/posts/11524/task-cancellation-parallel-programming-ii ...

  5. 只有mdf 没有 日志 恢复数据库

    1.先建一个与你要恢复的数据库名称一样的数据库.2.停止sql server,把你的数据库替换这个数据库.3.重启sql server,把数据库设置为紧急状态.  sp_configure 'allo ...

  6. uwsgi性能调忧

    摘要:调大uwsgi配置中 listen=1024的数目是提高并发能力最有效的办法.第二种方法是调大processes数目 发现总是超时报警 1  使用ab确定网络具体征况 [bre@dmp-1 ~] ...

  7. 关于iOS自定义控件:在view上实现事件和代理

    自定义控件.h #import <UIKit/UIKit.h> #import "PPViewtouchesBeginDelegate.h" @interface PP ...

  8. 函数之局部变量和使用global语句

    局部变量当你在函数定义内声明变量的时候,它们与函数外具有相同名称的其他变量没有任何关系,即变量名称对于函数来说是 局部 的.这称为变量的 作用域 .所有变量的作用域是它们被定义的块,从它们的名称被定义 ...

  9. HDU 5620 KK's Steel

    想了一下发现是斐波那契数列.....水题 #include <stdio.h> #include <algorithm> #include <string.h> # ...

  10. axis2开发实例(二)建立独自的新工程

    第一部分 环境搭建 1.  环境搭建 (1)    下载Axis2服务包:axis2-1.6.2-bin.zip,axis2-1.6.2-war.zip,分别解压到D:\webservice_axis ...