Bootstrap组件——模态弹窗

最新推荐文章于 2024-07-24 16:38:25 发布
最新推荐文章于 2024-07-24 16:38:25 发布
阅读量1.7k 收藏 8
点赞数
分类专栏： Bootstrap 文章标签： bootstrap 模态弹窗
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/107708026
版权

模态弹窗

一、模态弹窗

  1. 弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从<body>中删除滚动事件，以便模态框自身的内容能得到滚动。
  2. 点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。
  3. Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为我们相信那样叠加会造成用户体验不佳。

1.基本

当用户viewport 视口（弹出内容区）或设备的模态变得较长时，它们会自动滚动页面。
如果只要弹出模态而不需要淡入淡出效果，模态窗元素中定义 .fade 即可。

<div class="modal fade" id="modal1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>//可直接关闭，也可以灰色区域
				</button>
			</div>
			<div class="modal-body">
					Cras mattis consectetur purus sit amet fermentum. Cras justo odio, 
					dapibus ac facilisis in, egestas eget quam. Morbi leo risus, 
					porta ac consectetur ac, vestibulum at eros.
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通模态框</button>

在这里插入图片描述

2.垂直居中

将 .modal-dialog-centered 添加到 .modal-dialog 对话框以垂直居中模式。

<div class="modal fade" id="modal2">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
					垂直居中的模态框
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

在这里插入图片描述

3.包含栅格系统

<div class="modal fade" id="modal3">
	<div class="modal-dialog modal-dialog-centered">	<!-- modal-dialog-centered这个class要加在这里 -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-4 bg-info border">第1列</div>
						<div class="col-md-4 bg-info border">第2列</div>
						<div class="col-md-4 bg-info border">第3列</div>
						<div class="col-md-12 bg-info border">第4列</div>
					</div>
					<div class="row">
						<div class="col bg-info border">第1列</div>
						<div class="col bg-info border">第2列</div>
						<div class="col bg-info border">第3列</div>
						<div class="col bg-info border">第4列</div>
					</div>
					<div class="row">
						<div class="col-md-5 bg-info">第1列</div>
						<div class="col-md-4 bg-info ml-auto">第2列</div>
					</div>
					<div class="row mt-3">
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

在这里插入图片描述

4.模态框相同内容不同

<div class="modal fade" id="modal4">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form action="#">
					<div class="form-group">
						<label for="username" class="col-form-label">用户名：</label>
						<input type="text" class="form-control" id="username">
					</div>
					<div class="form-group">
						<label for="comment" class="col-form-label">评论：</label>
						<textarea class="form-control" id="comment"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="jimo">模态框相同内容不同</button>
<button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="lwc">模态框相同内容不同</button>
<button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="吃瓜群众">模态框相同内容不同</button>
<script>
	$('#modal4').on('show.bs.modal',function(ev){
		/*
			1、$(ev.relatedTarget)	这什值为点击的那个button
			2、.data('whatever')	这个是获取data-开关的属性的值
			*/

		var value=$(ev.relatedTarget).data('whatever');

		$(this).find('.modal-title').text('新评论来自于：'+value);
		$(this).find('.modal-body input').val(value);
	});
</script>

在这里插入图片描述

5.尺寸大小

在这里插入图片描述

<div class="modal fade bd-example-modal-xl" id="modal5">	
<!-- 这里添加.bd-example-modal-xl{lg、sm} -->
	<div class="modal-dialog modal-xl">	<!-- 这里添加.modal-xl -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				超大尺寸模态框
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

在这里插入图片描述

6.data属性

data属性，需要添加在button身上

data-backdrop 是否显示遮罩层
data-keyboard 按esc是否关闭模态框
data-focus 让模态框获取到焦点
data-show 初始化时模态框是否显示

<div class="modal fade" id="modal8">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				data属性
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<button class="btn btn-dark" data-toggle="modal" data-target="#modal8" 
data-backdrop="true" data-keyboard="false" data-focus="true" data-show="false">
data属性</button>

7.Tooltips工具提示和弹出提示框

当模态框关闭时，其包含的任何提示和Pop提示都会同步关闭。

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This 
  	<a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" 
  	data-content="Popover body content is set in this attribute.">button</a> 
  	triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and 
  	<a href="#" class="tooltip-test" title="Tooltip">that link</a>
  	 have tooltips on hover.</p>
</div>

在这里插入图片描述

8.方法与事件

<div class="modal fade" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				data属性
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<button class="btn btn-warning" id="myBtn">方法与事件</button>
<script>
	$('#myBtn').click(function(){
		$('#myModal').modal('show');
	});
	/* $('#myModal').modal('show');
	setTimeout(function(){
		$('#myModal').modal('hide');
	},2000); */
	//事件
	$('#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('完全隐藏了');
	});
</script>
飞羽逐星
关注
专栏目录
第09课：弹框组件整合——完善添加和修改功能
程序员有故事
09-22 620
弹框 弹框是 Web 产品中常见的一种交互方式，作用非常之多，可以用作提醒插件、侧边栏插件、信息编辑插件。Web 弹框一般包含一个蒙版，一个主体及多个触发各种事件的按钮，较常见于网页端，移动端也存在不过多数是作为提醒框使用。 弹窗主要包括以下几大优点。 节省页面 一个模块通常会包含列表、增加、编辑等项能，因功能和数据需求不同，一般会被设计成多个页面：列表页面、添加页面、编辑页面等，而使用弹窗...
Bootstrap基础-模态弹出框
小白的博客
08-05 1244
1. Bootstrap基础-模态弹出框 Bootstrap框架中的模态弹出框，分别运用了"modal"、“modal-dialog” 和 “modal-content” 样式，而弹出窗真正的内容都防止在"modal-content" 中，其主要又包括三个部分： 弹出框头部，modal-header，包括标题和关闭按钮； 弹出框主体，modal-body，弹出框的主要内容； 弹出框脚步，moda...
js代码控制bootstrap的模态框(modal)
autumngold的专栏
05-23 788
在Bootstrap 5中，模态框（Modal）是一个自定义的HTML元素，可以用于创建对话框。通过导入Bootstrap的JavaScript模块，可以使用其API来控制模态框的显示和隐藏。以下是一个简单的示例说明如何使用Bootstrap 5中的模态框。如果你的模态框需要在某个特定的动作或事件之后显示，可以将 myModal.show() 放入该事件的处理函数中。同样的，当你需要隐藏模态框时，可以调用 myModal.hide()。以上是Bootstrap 5模态框显示和隐藏的基本实现方式。
Bootstrap实现dialog上一步下一步多个弹窗交互
最新发布
我愿化作繁星
07-24 573
重新设置bootstrap主题色内容区以card形式展示，纯js实现分页功能共两步骤，第一步选择模板，第二步进行其他操作步骤一内的按钮点击下一步，进入第二步；第二步点击上一步，返回第一步步骤一选择模板时，根据模板id获取模板内容，并展示在第二步中关闭弹窗时重置数据，当从第二步点击上一步回到第二步时，不重置数据。
Bootstrap模态弹出框
weixin_34092455的博客
10-16 182
转自 http://www.cnblogs.com/xiaohuochai/p/7130390.html前面的话　　在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。本文将详细介绍Bootstrap模态弹出框...
Bootstrap 模态弹窗
snowstorm的博客
03-17 1165
模态弹窗（Modal）是绝大部分交互式网都需要的一种功能，一般有一下几种用法： 1、提示信息、警告信息、大文本等。 2、确认提示（多按钮）； 3、显示表单元素（一般使用ajax操作等功能）； 4、其他需要特使显示的信息（如单击缩略图时放大图片） 一、基本用法 代码结构如下： click me × Modal标题
Bootstrap 模态窗体
21号先锋者
02-07 413
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-w
Bootstrap模态窗口
weixin_45846139的博客
05-18 270
在一些网站上，当我们点击登录按钮或者是注册按钮时，会弹出一个小的窗口在页面上显示，二页面上的内容还能隐隐约约看见，就如下面图片一样,这种样式可以使用Bootstrap中模态框来快速又简单的实现。 触发器 在使用模态框之前，得先要有一个触发器来触发模态框，触发器可以是按钮或者链接等，在这里我们使用按钮来当触发器。 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
bootstrap 彈窗默認打開_Bootstrap 手册 07 - JS 组件篇
weixin_39932692的博客
02-23 291
1. 动画过渡 TransitionBootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。模态弹窗 (Modal) 的滑动和渐变效果；选项卡 (Tab) 的渐变效果；警告框 (Alert) 的渐变效果；图片轮播 (Carousel) 的滑动效果；2. 模态弹窗 ModalBootstrap 模态弹窗通常有以下表现——点击某按钮后弹窗，弹窗内容为文...
Bootstrap
zy_lalala的博客
08-24 710
一、Bootstrap简介 1. 什么是Bootstrap？ Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件
两款jquery弹窗插件
07-05
接下来，我们要介绍的是另一款非常强大的jQuery弹窗插件——Bootstrap Modal。Bootstrap是一个广泛使用的前端框架，其内置的Modal组件同样是一个功能完善的弹窗解决方案。Bootstrap Modal不仅具有基本的弹出层功能，...
qtabwidget放大_Qt自定义弹窗屏蔽父窗口（QWidget设置setWindowModality(Qt::ApplicationModal);以后再show）...
weixin_36235398的博客
01-12 1439
写Qt程序时遇到一个问题: Qt自带的弹窗功能单一,所以须要自己用ui设计弹窗的内容,这样弹窗就和普通窗口一样了,但问题是这个弹窗显示后父窗口还是活动的.网上找了很久找到了解决办法: Qt::WindowFlags flags = Qt::Dialog; mycom->setWindowFlags(flags); mycom->setWindowModality(Qt::Applica...
用bootstrap简写模态弹窗
腻害
05-17 236
用bootstrap简写模态弹窗 (撰写时间：2021年5月17日 星期一) 当我们在做项目或者课后作业时肯会经常遇到一些弹窗内容，而且要是单纯的用JavaScript代码来实现的话，可能会比较消耗时间，这次我们来分享一个插件bootstrap，而Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩
Bootstrap模态框钩子事件
weixin_30249203的博客
04-22 169
事件类型 　　　　　　　 描述show.bs.modal show 　　 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。shown.bs.modal 　　　　 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 related...
Bootstrap弹出模态框的运用
1
06-09 8914
作者：张铭标 撰写时间：2019年 6月3日 Bootstrap模态框主要分为三部分.modal-header,.modal-body,.modal-footer.在使用之前需要引入一些插件: bootstrap.bundle.js,jquery插件和bootstrap.css.这几个插件才能够使用.下面是模态框的基本代码: 效果图: 这是模态框的基本用法,在使用模态框的时候注意要尽量加上一...
bootstrap里的弹框组件Model
荣默默的博客
04-25 2814
首先，你得引入对应的包： 接着创建一个提供出发弹框的标签： 点我 这里的标签也可用 再接着就是创建弹框： 标题 内容 关闭 提交 值得提醒的是，span 标签或者是你的button标，这个data-toggle="modal"属性用来把 的内容识别为模态框；里面的data-
BootStrap学习笔记JS插件（一）--模态弹出框
男神的专栏
02-05 863
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。，一般使用“modal-header”表示，主要包括标题和关闭按钮。，一般使用“modal-footer”表示，主要放置操作按钮。.modal-lg 为大弹出框；试验在触发按钮或弹出modal上设置，发现都可以使用。，一般使用“modal-body”表示，弹出框的主要内容。
Bootstrap弹框使用
m0_54007573的博客
04-23 554
Bootstrap弹框使用
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 3225
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
Bootstrap模态弹窗实现深度解析
“全面解析Bootstrap弹窗的实现方法，讲解了Bootstrap框架中模态弹出框的结构和数据触发机制。” Bootstrap弹窗是网页设计中常用的一种交互元素，它提供了便捷的方式来展示信息或与用户交互，而无需离开当前页面。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值