Bootstrap 模态弹窗

最新推荐文章于 2024-08-21 09:17:03 发布

guo-snowstorm

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap 模态弹窗

本文链接：https://blog.youkuaiyun.com/u010874036/article/details/50916577

Bootstrap 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了模态弹窗（Modal）的基本使用方法及应用场景，包括提示信息、确认提示、表单显示等内容。详细解释了如何通过HTML结构实现模态弹窗，并提供了JavaScript配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模态弹窗（Modal）是绝大部分交互式网都需要的一种功能，一般有一下几种用法：

1、提示信息、警告信息、大文本等。

2、确认提示（多按钮）；

3、显示表单元素（一般使用ajax操作等功能）；

4、其他需要特使显示的信息（如单击缩略图时放大图片）

一、基本用法

代码结构如下：

<button data-toggle="modal" data-target="#myModal" class="btn btn-primary">click me</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" aria-hidden="true">×</button>
					<h4 class="modal-title">Modal标题</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>
		</div>
	</div>

首先，那个按钮用于触发弹窗，弹窗部分有三层div嵌套而成，真正的内容容器（modal-content）内又包含了弹窗的头、内容、底部。

底部区域一般都是放置各种按钮

注意：

1、触发元素中，data-toggle和data-target属性是必须的（a元素也可为触发元素，此时可以用href属性代替data-target，当然，button中只能用data-targe了，因为其没有href属性啦）。

2、在进行声明定义时，该组件还支持默认的参数选项，如，是否有灰色背景罩、按Esc键时是否关闭弹窗等。如下图为modal插件的声明式选项：

上述属性，除了href外，其他3个data-开头的属性，一般情况下可以设置在触发元素（带有[data-toggle=“modal”]属性的元素）上，也可以设置在弹窗最外层的div元素上，但是一般设置在触发元素上。

二、Modal组件的JavaScript用法：

$(‘#myModal’).modal({
backdrop: true,
keyboard: false
})

其他的属性：

参数：

事件：