首页 > 代码库 > 极简的css浮动窗口
极简的css浮动窗口
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width,initial-scale=1"><title>浮动窗口</title><style>.black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);}.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 0; border: 1px solid orange; background-color: white; z-index: 1002; overflow: auto;}</style><script>function openWin(){ document.getElementById(‘light‘).style.display=‘block‘; document.getElementById(‘fade‘).style.display=‘block‘ }function closeWin(){ document.getElementById(‘light‘).style.display=‘none‘; document.getElementById(‘fade‘).style.display=‘none‘}</script></head><body><p><a href="javascript:void(0)" onclick="openWin()">点击这里打开窗口</a></p><div id="light" class="white_content"> 这里是窗口内容 <a href="javascript:void(0)" onclick="closeWin()"> Close</a> </div><div id="fade" class="black_overlay"></div></body></html>
极简的css浮动窗口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。