如何在css中编写modal框

html-css016

如何在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文件。

<ul style="max-height: 230pxoverflow-y: auto" class="dropdown-menu inner selectpicker" role="menu">

<li class="" rel="0"><a tabindex="0" class="" style=""><span class="text">Please Choose</span></a></li>

<li class="" rel="1"><a tabindex="0" class="" style=""><span class="text">QQQQ</span></a></li>

<li class="" rel="2"><a tabindex="0" class="" style=""><span class="text">PPPP</span></a></li>

<li class="" rel="3"><a tabindex="0" class="" style=""><span class="text">abc</span></a></li>

<li class="" rel="4"><a tabindex="0" class="" style=""><span class="text">aaaaaaaa</span></a></li>

</ul>

选择最后一个元素

driver.findElement(By.xpath("(//ul[@class='dropdown-menu inner selectpicker']/li)[last()]/a/span[@class='text']")).click()

扩展资料：

注意事项

如果页面中有两个<ul><li>...</li></ul>，需要先定位到特定的ul，不然li[last()]会始终选择当前页面的最后一个li。

css之指定带有特点样式的ul下所有li里面的a标签的样式

<style type="text/css">

ul.aside-hd li a{

color:#B97800

}

.aside-hd li a:HOVER {

color:red

}

</style>

css之指定带有特点样式的ul下所有li里面的a标签的样式。