Bootstrap响应式前端框架笔记十六——模态框交互

Bootstrap响应式前端框架笔记十六——模态框交互

    模态框也可以称为弹出窗,其作用是当用户点击某个功能按钮后,在网页上弹出一个内容窗口。在Bootstrap中,创建模态框十分简单。首先模态框组件通过modal类来创建,其默认隐藏,开发者可以使用data相关属性来将其唤出。简单示例如下:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
正常模态框
</button>
<!--这里设置的id用于绑定在按钮事件上-->
<div class="modal fade" id="myModal" tabindex="-1">
    <!--modal-dialog为悬浮框模式的模态框-->
	<div class="modal-dialog">
        <!--模态框组件内容部分-->
		<div class="modal-content">
            <!--头部内容-->
			<div class="modal-header">
                <!--为按钮绑定data-dismiss="modal"可以实现点击取消模态框-->
				<button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
				<h4 class="modal-title" id="myModalLabel">模态框标题</h4>
			</div>
            <!--模态框主体内容-->
		    <div class="modal-body">
		    模态框内容
		    </div>
            <!--模态框尾部内容-->
	        <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
		    </div>
	    </div>
    </div>
</div>

效果如下:

可以为model-dialog类增加modal-lg或者modal-sm可以创建大号的模态框或者小号的模态框。需要注意,模态框的弹出时有渐入动画的,如果不需要动画效果,只需要将fade类去掉即可。

    对于定义为modal模块的div,开发者也可以通过设置data属性的方式来对模态框进行设置,列举如下:

data-backdrop

布尔"true"或"false"

如果设置为true,则显示灰色背景,否则不显示灰色背景

data-keyboard

布尔值

设置点击键盘esc键是否隐藏模态框,注意,必须设置tabindex属性,这个值才有效

data-show

布尔值

模态框初始化后是否立即展示

data-remote

路径

如果配置了url,会将内容加载进modal-content中

modal模块也支持通过js代码来进行相关控制,支持的方法如下:

$('#open').on("click",function(){
    //展示模态框
    $('#myModal').modal('show');
});
$('#close').on("click",function(){
    //隐藏模态框
	$('#myModal').modal('hide');
});
$('#exchange').on("click",function(){
    //显示或隐藏进行切换
	$('#myModal').modal('toggle');
});
$('#setting').on("click",function(){
    //对模态框的属性进行设置 传入对象
	$('#myModal').modal({
		keyboard:false
	});
});

模态框也可以添加一些特有的事件回调,示例如下:

$('#myModal').on('show.bs.modal',function(e){
	console.log("模态框将要展示触发")
});
$('#myModal').on('shown.bs.modal',function(e){
	console.log("模态框已经展示后触发")
});
$('#myModal').on('hide.bs.modal',function(e){
	console.log("模态框将要消失触发")
});
$('#myModal').on('hidden.bs.modal',function(e){
	console.log("模态框已经消失后触发")
});
$('#myModal').on('loaded.bs.modal',function(e){
	console.log("从远端数据源加载数据完成")
});

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/modelJS.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

TableLayout(表格布局)

表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。TableRow可以添加子控件,每添加一个为一列。 Ta...

2128
来自专栏腾讯云商业智能分析团队的专栏

如何使用高亮、表格渲染

本文将详细介绍如何对表格中的数据种类设置高亮,以及设置表格渲染,希望对大家有所帮助。

1990
来自专栏yang0range

Android硬件加速原理和简介

原理:使用PNG图片(BitmaoDrable)解码PNG图片生成Bitmap,传到底层,有GPU渲染图片解码,消耗CPU运算资源,Bitmap占内存大,绘制慢...

2625
来自专栏我分享我快乐

如何将flash制作的动画存成高质量的GIF

喜欢用flash制作GIF动画的同学有个疑惑就是flash直接导出的GIF质量不高无法达到我们对动画的色彩要求,所以下面教大家如何将flash制作的动画存成...

3367
来自专栏深度学习自然语言处理

matplotlib--python的数据可视化入门

在平时做实验的时候,往往为了让数据更直接的表达一个趋势或为了描绘一种关系,经常会用到画图,再加上我们经常用的语言是pyhon居多,所以,作为python中的画图...

33710
来自专栏IMWeb前端团队

React事件初探

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript库。 创造 React 是为了解决一个问题:构建随着时间...

2358
来自专栏SnailTyan

matplotlib的基本用法(四)——设置legend图例

本文主要是关于matplotlib的一些基本用法。 Demo import matplotlib.pyplot as plt import numpy as n...

2227
来自专栏Golang语言社区

Golang中image/jpeg包和image/png包用法

jpeg包实现了jpeg图片的编码和解码 func Decode(r io.Reader) (image.Image, error) //Decode读取一...

7104
来自专栏DannyHoo的专栏

iOS 开发中Masonry和SnapKit在使用上的一些区别

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2382
来自专栏Java后端技术

Web上的支持的图片格式以及它们之间的区别

851

扫码关注云+社区

领取腾讯云代金券