简要教程

这是一款纯CSS模态窗口实现炫酷动画效果。该模态窗口通过CSS :target属性来制作，并能结合animate.css来制作多种打开模态窗口时的动画效果。

 安装

可以通过npm来安装该CSS模态窗口插件。

npm install light-modal                 

 使用方法

在页面中引入light-modal .css文件。

<link rel="stylesheet" href="css/light-modal .css">         

 HTML结构

一个模态窗口的基本HTML结构如下：

<div class="light-modal" id="unique-id" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
    <div class="light-modal-content animated zoomInUp">
        <!-- light modal header -->
        <div class="light-modal-header">
            <h3 class="light-modal-heading">Modal Title</h3>
            <a href="#" class="light-modal-close-icon" aria-label="close">×</a>
        </div>
        <!-- light modal body -->
        <div class="light-modal-body">
            <!-- Your content -->
        </div>
        <!-- light modal footer -->
        <div class="light-modal-footer">
            <a href="#" class="light-modal-close-btn" aria-label="close">Close</a>
        </div>
    </div>
</div>

 触发模态窗口

触发模态窗口通过唯一的ID号来实现。例如：

<a href="#unique-id" class="btn">打开模态窗口</a>             

这个超链接可以打开ID为unique-id的模态窗口。

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！