前端之家收集整理的这篇文章主要介绍了
弹窗，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
弹窗
<Meta charset="UTF-8">
弹窗@H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_6@
<style>
html,body,div{margin:0;padding:0;}
html,.a{width:100%;height:100%;}
.a{position:fixed;background:#000;opacity:0.5;}
.b{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;background:#fff;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b">Hello World</div>
</body>
</html></code></pre>
<p><strong>ps:opacity好像会使其子元素也透明，所以只得把b从a内部移出，不知是否有其他<a href="https://www.jb51.cc/tag/jiejuefangfa/" target="_blank" class="keywords">解决方法</a>；</strong></p><i class="glyphicon glyphicon-link"></i> 原文链接：https://www.f2er.com/note/422038.html</div>
<div class="topcard-tags"><a href="https://www.f2er.com/tag/danchuang/" class="tag_link" target="_blank">弹窗</a></div>
<ul class="list-group">
<li class="list-group-item"><a href="https://www.f2er.com/note/422039.html" title="全屏布局">上一篇：全屏布局</a><a href="https://www.f2er.com/note/422037.html" title="js二维数组排序装逼写法" class="text-muted pull-right">下一篇：js二维数组排序装逼写法</a>
</li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="9144498553"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="title"><h1>猜你在找的程序笔记相关文章</h1></div>
<div class="list_con">
<a href="https://www.f2er.com/note/996782.html" title="解决Connection to `ssl://pecl.php.net:443' failed"><div class="title">解决Connection to `ssl://pecl.php.net:443' failed</div>
<div class="summary">这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995756.html" title="Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址"><div class="title">Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址</div>
<div class="summary">在浏览器输入chrome://flags/回车，找到Omnibox UI Hide Steady-State URL Scheme and Tri...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995699.html" title="Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)"><div class="title">Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)</div>
<div class="summary">方法一： 我们都知道Ubuntu有一个专门用来安装软件的工具apt，我们可以用它来全自动安装ar...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995698.html" title="VCODE修改控制台编码格式解决输出乱码问题"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/01-30/23/ca5ea199cbb2254cc60030c967062f11.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">VCODE修改控制台编码格式解决输出乱码问题</div>
<div class="summary">中文的windows下的cmd默认使用GBK的编码，敲代码时，页面使用的是UTF-8(65001),而powershe...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995697.html" title="编译busybox错误汇总"><div class="title">编译busybox错误汇总</div>
<div class="summary">提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin，但是make的时候，...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="list_con">
<a href="https://www.f2er.com/note/995365.html" title="Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/01-26/08/053c5912c7938467781334a0f01e31c5.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法</div>
<div class="summary">在使用gulp bundle --ship对spfx项目进行编译的时候，出现“The build failed because a t...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995364.html" title="处理Graph API .NET SDK 的分页请求"><div class="title">处理Graph API .NET SDK 的分页请求</div>
<div class="summary">当使用Graph API进行查询的时候，如果结果过多，Graph API会对返回结果进行分页。 例如，下...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995363.html" title="自动化部署SharePoint Online modern site的注意事项"><div class="title">自动化部署SharePoint Online modern site的注意事项</div>
<div class="summary">整个流程是用户在SharePoint site里发起创建新team site的请求，管理员审核通过后，Power ...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995207.html" title="安装Office套件和Visio可能遇到的问题"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/01-14/08/c819a1948189ca9fdb205469b7766211.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">安装Office套件和Visio可能遇到的问题</div>
<div class="summary">相关描述 安装可能出现的问题： 电脑系统： win10 教育版 本次安装版本为： Office 2016 c...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/note/995206.html" title="打印机相关整理"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/01-14/08/d31d7c1325ae0dec0ce3910ed178d137.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">打印机相关整理</div>
<div class="summary">佳能打印机清零 版本号：佳能 ip2788 出现问题：错误代码：5B00 原因：打印机计数满，需要...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>
</div>
<!-- left end-->
<!-- right -->
<div class="col-sm-12 col-md-12 col-lg-3">
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">编程分类</label>
<div class="cate mt-20"><a href="https://www.f2er.com/note/" title="程序笔记">程序笔记</a><a href="https://www.f2er.com/seo/" title="SEO">SEO</a><div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">最新文章</label>
<ul class="n-list"><li><a href="https://www.f2er.com/note/996782.html" title="解决Connection to `ssl://pecl.php.net:443' failed" target="_blank">• 解决Connection to `ssl:/</a></li>
<li><a href="https://www.f2er.com/note/995756.html" title="Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址" target="_blank">• Chrome无法显示全网址怎么</a></li>
<li><a href="https://www.f2er.com/note/995699.html" title="Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)" target="_blank">• Ubuntu 18.04安装arm-linu</a></li>
<li><a href="https://www.f2er.com/note/995698.html" title="VCODE修改控制台编码格式解决输出乱码问题" target="_blank">• VCODE修改控制台编码格式解</a></li>
<li><a href="https://www.f2er.com/note/995697.html" title="编译busybox错误汇总" target="_blank">• 编译busybox错误汇总</a></li>
<li><a href="https://www.f2er.com/note/995366.html" title="Graph Explore的使用介绍" target="_blank">• Graph Explore的使用介绍</a></li>
<li><a href="https://www.f2er.com/note/995365.html" title="Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法" target="_blank">• Bundle SPFX 文件时报错 “</a></li>
<li><a href="https://www.f2er.com/note/995364.html" title="处理Graph API .NET SDK 的分页请求" target="_blank">• 处理Graph API .NET SDK 的</a></li>
<li><a href="https://www.f2er.com/note/995363.html" title="自动化部署SharePoint Online modern site的注意事项" target="_blank">• 自动化部署SharePoint Onl</a></li>
<li><a href="https://www.f2er.com/note/995207.html" title="安装Office套件和Visio可能遇到的问题" target="_blank">• 安装Office套件和Visio可能</a></li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">热门标签
<span class="pull-right tx-12">
<a href="https://www.f2er.com/all" target="_blank">更多 ►</a></span>
</label>
<div class="topcard-tags"><a href="https://www.f2er.com/tag/wanzhengdizhi/" title="完整地址" target="_blank">完整地址</a><a href="https://www.f2er.com/tag/quanwangzhi/" title="全网址" target="_blank">全网址</a><a href="https://www.f2er.com/tag/getattribute/" title=".get_attribute" target="_blank">.get_attribu</a><a href="https://www.f2er.com/tag/GraphExplore/" title="Graph Explore" target="_blank">Graph Explor</a><a href="https://www.f2er.com/tag/wangzhanseo/" title="网站seo" target="_blank">网站seo</a><a href="https://www.f2er.com/tag/minglingbaocuo/" title="命令报错" target="_blank">命令报错</a><a href="https://www.f2er.com/tag/tihuanphp7/" title="替换php7" target="_blank">替换php7</a><a href="https://www.f2er.com/tag/caixiejiyi/" title="采撷记（一）" target="_blank">采撷记（一）</a><a href="https://www.f2er.com/tag/WTF/" title="WTF?" target="_blank">WTF?</a><a href="https://www.f2er.com/tag/HOMEBREWGITHUBAPITOKEN/" title="HOMEBREW_GITHUB_API_TOKEN" target="_blank">HOMEBREW_GIT</a><a href="https://www.f2er.com/tag/FormDataduixiangfasongwenjian/" title="FormData对象发送文件" target="_blank">FormData对象</a><a href="https://www.f2er.com/tag/shujumoxingdeguanlianshanchu/" title="数据模型的关联删除" target="_blank">数据模型的关</a><a href="https://www.f2er.com/tag/yilaiguanxichaxun/" title="依赖关系查询" target="_blank">依赖关系查询</a><a href="https://www.f2er.com/tag/iOSkaifachangyonghong/" title="iOS开发常用宏" target="_blank">iOS开发常用宏</a><a href="https://www.f2er.com/tag/utiljschangyongjsgongnengdabao/" title="util.js----常用js功能打包" target="_blank">util.js----常</a><a href="https://www.f2er.com/tag/UILabelshezhiwenzixingjianjubingjuzhongxianshi/" title="UILabel 设置文字行间距并居中显示" target="_blank">UILabel 设置</a><a href="https://www.f2er.com/tag/reverseadminpy/" title="reverseadmin.py" target="_blank">reverseadmin</a><a href="https://www.f2er.com/tag/phppipeizhongwen/" title="php匹配中文" target="_blank">php匹配中文</a><a href="https://www.f2er.com/tag/ngconf/" title="ngconf" target="_blank">ngconf</a><a href="https://www.f2er.com/tag/dangqianqiantishiziduanleixingyizhi/" title="当前前提是字段类型一致)" target="_blank">当前前提是字</a><a href="https://www.f2er.com/tag/mongozhixingbijiaochaxunziduanzhijiandebijiao/" title="mongo执行比较查询(字段之间的比较" target="_blank">mongo执行比较</a><a href="https://www.f2er.com/tag/mongoshixianziwendangderenyichaxun/" title="mongo实现子文档的任意查询" target="_blank">mongo实现子文</a><a href="https://www.f2er.com/tag/huanyongSublimeText3bingjiejuebianmawenti/" title="--换用Sublime Text3并解决编码问题" target="_blank">--换用Sublim</a><a href="https://www.f2er.com/tag/jsmodule/" title="js module" target="_blank">js module</a><a href="https://www.f2er.com/tag/UseLaraveltoDownloadtableasCSV/" title="Use Laravel to Download table as CSV" target="_blank">Use Laravel </a><a href="https://www.f2er.com/tag/throttleshixian/" title="throttle 实现" target="_blank">throttle 实现</a><a href="https://www.f2er.com/tag/YII2chengxuneihuoquActiveRecordsuozhixingdeSQLyuju/" title="YII2 程序内获取 ActiveRecord 所执行的 SQL 语句" target="_blank">YII2 程序内获</a><a href="https://www.f2er.com/tag/YII2MongoDBActiveRecordgtexample/" title="YII2 MongoDB ActiveRecord $gt example" target="_blank">YII2 MongoDB</a><a href="https://www.f2er.com/tag/jsgenjupianyijisuanriqi/" title="js根据偏移计算日期" target="_blank">js根据偏移计</a><a href="https://www.f2er.com/tag/Linuxxiazhongyaodemulu/" title="--Linux下重要的目录" target="_blank">--Linux下重要</a></div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
</div>
<!-- right end -->
</div>
</div>
<footer id="footer">
<div class="container">
<div class="row hidden-xs">
<dl class="col-sm-6 site-link">
<dt>最近更新</dt><dd><a href="https://www.f2er.com/faq/884225.html" title="jQuery选择伪元素：after" target="_blank">· jQuery选择伪元素：after</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884224.html" title="JavaScript随机颜色生成器" target="_blank">· JavaScript随机颜色生成器</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884223.html" title="JavaScript指数" target="_blank">· JavaScript指数</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884222.html" title="addResourceHandlers无法解析静态资源" target="_blank">· addResourceHandlers无法解析静态资源</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884221.html" title="如何将字节数组转换为MultipartFile" target="_blank">· 如何将字节数组转换为MultipartFile</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884220.html" title="在java中如何创建一个文件并写入内容？" target="_blank">· 在java中如何创建一个文件并写入内容？</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884219.html" title="星号*在Python中是什么意思？" target="_blank">· 星号*在Python中是什么意思？</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884218.html" title="Flask框架：MVC模式" target="_blank">· Flask框架：MVC模式</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884217.html" title="在JavaScript对象数组中按ID查找对象" target="_blank">· 在JavaScript对象数组中按ID查找对象</a><span class="text-muted pull-right">10-20</span></dd>
<dd><a href="https://www.f2er.com/faq/884216.html" title="使用Javascript / jQuery下载文件" target="_blank">· 使用Javascript / jQuery下载文件</a><span class="text-muted pull-right">10-20</span></dd>
</dl>
<dl class="col-sm-4 site-link">
<dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="https://www.f2er.com" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl>
<dl class="col-sm-2 site-link">
<dt>商务合作</dt>
<dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd>
</dl>
</div>
<div class="copyright">
Copyright © 2019 前端之家. 当前版本 V7.0.16<br>
<span class="ml5">前端之家 版权所有
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span>
</div>
</div>
</footer>
<script type="text/javascript" src="https://www.f2er.com/js/base.js"></script>
</body>
</html>
