电商二十五、Bootstrap的data-toggle="modal"、data-toggle="popover"、data-toggle="tooltips" data-target=“#id值”

最新推荐文章于 2025-04-07 20:40:13 发布

详见附件

最新推荐文章于 2025-04-07 20:40:13 发布

阅读量2.1k

点赞数

分类专栏：电商-------基于ssm框架大型分布式电商系统开发文章标签：电商二十五、Bootstrap的data-toggle=&quot;m

本文链接：https://blog.youkuaiyun.com/lbh19630726/article/details/99197906

版权

①bootstrap的data-toggle="modal" data-target=“#弹出窗口（div）的id”

新建一个文件夹：bootstrapdemo文件夹

引入bootstrap.min.js文件

新建文件bootstrap-modal.html

引入bootstrap.min.css文件和jquery-2.2.3.min.js文件

文件bootstrap-modal.html的内容为：

<html>
<head>
<title>bootstrap小demo  data-toggle="modal"</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<button type="button" data-toggle="modal" data-target="#modal"> <i class="fa fa-user-plus m-r-sm text-md"></i>添加</button> 
<div class="modal fade" tabindex="-1" role="dialog" id="modal"  aria-labelledby="myModalLabel" aria-hidd