模态框使用方法

帆 帆 2024-04-30 0 阅读 0 评论 
　　<!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>


本文来源：重庆seo博客

本文地址：https://focusonseo.cn/bootstrap_5/55.html

文章声明：以上内容(如有图片或视频亦包括在内)除非注明，否则均为重庆seo博客原创文章，转载或复制请以超链接形式并注明出处。

相关文章

上一篇：导航字体颜色修改

下一篇：