前端：bootstrap ——利用css写个简单弹框

最新推荐文章于 2024-05-28 15:11:32 发布

原创

最新推荐文章于 2024-05-28 15:11:32 发布 · 450 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客分享了如何在前端开发中，利用Bootstrap和CSS来创建一个简单的弹出框。内容涉及页面内容的居中布局，以及弹框的实现。通过引入外部CSS和JS文件，并设置tabindex和aria-hidden属性来达到隐藏效果。

如标题，分享测试的时候用css写的弹框

页面内容居中：

弹框：

引用外链css，js

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

tabindex="-1" aria-hidden="true" 实现隐藏

<h3>bootstrap 简单弹框</h3>
	
	<button data-toggle="modal" data-target="#alterPasswordDiv" id="alterPassword">修改</button></a>
	
	<!-- 修改密码弹框 -->	
				
		      <div class="modal inmodal" id="alterPasswordDiv" tabindex="-1" role="dialog"  aria-hidden="true">