1. 首页>>前端>>CSS

Bootstrap 模态框使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap模态框(Modal)插件</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/jquery-3.6.0.min.js"></script> 
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>

		<!-- <h2>创建模态框(Modal)</h2> -->
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
			立即下载
		</button>
		<!-- 模态框(Modal) -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							Metatrader 4交易平台
						</h4>
						<!-- 添加css属性 -->
					</div>
					<div class="modal-body">
					这里添加你想要的from标签,或者是自己定义内容,同时不要忘记css
					</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 -->
		</div>
	</body>
</html>


转载联系作者并注明出处:https://www.focusonseo.cn/css/29.html