css+js实现点击文字或按钮弹出一个div窗口
- admin
- 2020-12-21 14:40:39
css部分：
<style>
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=88); }
<!-- 下方的宽高，是为了约束弹框的位置和大小, 重点在position: fixed命令-->
.white_mrc { display: none; width: 250px; height: 400px; padding: 20px; border: 2px solid rgb(196, 196, 196); background-color: white; z-index:1002; overflow: auto; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.white_mrc a { text-align: left;}
</style>
弹出层及按钮部分：
<body>
<!-- 下方代码作为标记弹窗文字，可以复制过去直接替换中文字 -->
<p> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里弹出窗口</a></p>
<!-- 这段是弹框的代码，放在section外面最好，担心会有其他css影响样式 -->
<div id="light" class="white_mrc">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a>
<a>
弹窗中的文字在这里弹窗中的文字在这里弹窗中的文字在这里弹窗中的文字在这里<br>
弹窗中的文字在这里弹窗中的文字在这里弹窗中的文字在这里<br>
</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
tips：不需要引入外部js，也不需要写任何js命令，弹窗是绝对水平垂直居中。
留言