CSS Modal—纯CSS实现模态窗口

Dear 丶 2021-09-10 15:32 427阅读 0赞

今天介绍一个用CSS实现模态窗口的插件——CSS Modal ，利用它可以很方便的实现模态窗口。它可以用来展示任意的HTML内容，并且支持响应式设计，具有良好的兼容性，通过它的js扩展，还能实现更强大的功能。

1、兼容性

Chrome  
Firefox  
Safari 6.x  
Opera 12+  
Internet Explorer 8 (部分功能)  
Internet Explorer 9+  
iOS 6  
Android 2.3 (functional)  
Android 4.x  
Windows Phone 8

2、使用方法

到CSS Modal官网下载CSS Modal，引入CSS文件，如果需要更多高级功能需要引入js文件

<link rel="stylesheet" href="test/modal.css">
    <script src="modal.js"></script>

使用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文件。

发表评论取消回复

表情：

评论列表（有 0 条评论，427人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java多模态（Modal）视图实现案例分析

在Java开发中，多模态视图（Modal View）通常指的是通过弹窗或者全屏展示的一种交互模式。以下是一个简单的Java多模态视图实现案例分析： 1. **需求定义**：

心已赠人/ 2024年10月11日 07:06/ 0 赞/ 47 阅读

相关关于模态对话框(modal dialog)

接触过窗口编程的人都知道有这么一种对话框，一旦在父窗口中被触发就必须点击确定或取消，否则将无法访问其父窗口。这就是模式对话框或模态对话框。但modal这个词大家在网上搜索之

r囧r小猫/ 2023年10月18日 14:19/ 0 赞/ 166 阅读

相关纯CSS实现checkbox

纯css实现的checkbox，效果见我的[codepen][]。关键在于把原生的input隐藏，用和他相关的label来探测单击事件。再就是checkbox里的对勾的

我会带着你远行/ 2022年08月24日 15:24/ 0 赞/ 326 阅读

相关用CSS和js实现模态框

用CSS和JS改变z-index的属性值就可以实现模态框 <html> <head> <title>modal box</title> <s

一时失言乱红尘/ 2022年07月14日 03:21/ 0 赞/ 182 阅读

相关 bootstrap 模态框modal

1. 使用前提: 加载mode.js或bootstrap.js或压缩版的 bootstrap.min.js 2. 两种触发显示: 通过 data 属性：在控制器元素（

亦凉/ 2022年05月24日 10:17/ 0 赞/ 371 阅读

相关 Angularjs 模态窗口

对话框的两种类型：模态类型和非模态类型 1 模态窗口打开模态窗口后，只要不关闭该窗口，鼠标焦点或者光标就会一直停留在该窗口上。只有关闭该窗口后，调用窗口才能继续

布满荆棘的人生/ 2022年05月21日 05:10/ 0 赞/ 206 阅读

相关 bootstrap模态窗口

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

逃离我推掉我的手/ 2022年01月12日 15:43/ 0 赞/ 254 阅读

相关 vue系列_自定义组件Modal（模态窗口）

父组件的代码（打开模态窗口的代码）： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

谁借莪１个温暖的怀抱￠/ 2021年11月19日 15:42/ 0 赞/ 1495 阅读

相关 CSS Modal—纯CSS实现模态窗口

今天介绍一个用CSS实现模态窗口的插件——CSS Modal ，利用它可以很方便的实现模态窗口。它可以用来展示任意的HTML内容，并且支持响应式设计，具有良好的兼容性，通过它的

Dear 丶/ 2021年09月10日 15:32/ 0 赞/ 428 阅读

相关纯 CSS 实现梯形

在用 css 画梯形的过程中，主要使用 border-right-color: transparent 或 border-left-color: transparent ...

朱雀/ 2021年03月29日 11:49/ 0 赞/ 1242 阅读