如何在css中编写modal框
2个回答
2017-07-07 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
使用CSS Modal HTML结构
<ul><li><a href="#modal-show" title="CSS Modal">CSS Modal</a></li></ul><section class="modal--show" id="modal-show" tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-show">CSS Modal—纯CSS实现模态窗口</h2>
</header>
<div class="modal-content">
<p>今天介绍一个用CSS实现模态窗口的插件——CSS Modal ，利用它可以很方便的实现模态窗口。它可以用来展示任意的HTML内容，并且支持响应式设计，具有良好的兼容性，通过它的js扩展，还能实现更强大的功能。</p>
</div>
<footer>
<p>by ZJIAN</p>
</footer>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">×</a></section>
这是它最基本的使用方法，点击ul标签中的CSS Modal就会弹出section标签中的内容，如果你想使用更高级的功能，比如相册的展示、视频等等功能，CSS Modal也提供了解决方案，需要引入plugins中对应的js文件。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先定义一个隐藏的div : <div id='' style='display:none;'></div>
点击事件 把div变为display：block；控制div显示自己想放置的位置
同时整体背景设置一下
大一点的：z-index: 19891015;
背景色： background-color: #000;
透明度 opacity: 0.3;
div 里放一个 X ，点击时 变为display：none；
点击事件 把div变为display：block；控制div显示自己想放置的位置
同时整体背景设置一下
大一点的：z-index: 19891015;
背景色： background-color: #000;
透明度 opacity: 0.3;
div 里放一个 X ，点击时 变为display：none；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
