如何在css中编写modal框

html-css015

如何在css中编写modal框,第1张

使用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">&times</a></section>

这是它最基本的使用方法，点击ul标签中的CSS Modal就会弹出section标签中的内容，如果你想使用更高级的功能，比如相册的展示、视频等等功能，CSS Modal也提供了解决方案，需要引入plugins中对应的js文件。

要想调试该问题最简单的办法就是在本该展示边框的位置右击，然后在弹出菜单选择“查看元素”。

之后会弹出developtools界面，找到“样式”标签，其会对应显示作用于该展示域的css样式属性及值。对于未生效的样式会辅以“删除线”，据此即可查明不显示的原因。

css：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。能够做到网页表现与内容分离的一种样式设计语言。

但是想要有交互特效，比如点击、拖曳、失焦、聚焦等特效都是需要结合js、jq来实现的。因此没办法做到点击a标签达到显示a内部其他dom内容。

不过css有个hover能实现鼠标移动到a标签上展示其下内容。比如最常见的鼠标经过展示下拉框，使用纯css就能达到，主要原因就是使用hover经过将下面的ul.submenu给显示出来

例如

<a href="#" id="a1">xxx

<ul style="display:none/*一开始是隐藏的，为了说明直接写在节点上*/">

<li><a href="#">111</a></li>

......

</ul>

</a>

css:

#a1:hover ul{ display:block/*鼠标经过将ul显示出来*/}