tobento/css-modal

一个经典的模态框，你可以包含任何你想要的内容

维护者

详细信息

github.com/tobento-ch/css-modal

主页

源代码

问题

安装: 4

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言：JavaScript

1.0.0 2024-02-27 13:45 UTC

MIT c46caa58e58459140e6914606ca9c280354bc17c

cssmodaltobento

This package is auto-updated.

Last update: 2024-09-27 15:20:08 UTC

README

modals.css 提供了一个经典的模态框，你可以包含任何你想要的内容。此外，modals.js 提供了打开和关闭模态框的逻辑。

目录

入门

浏览器支持

仅支持现代浏览器。

导入文件

<link href="modals.css" rel="stylesheet" type="text/css">
<script src="modals.js" type="module"></script>

文档

你可以访问docs.tobento.ch/css-modal页面，查看带有演示的文档。

Css

基本用法

基本模态结构是

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="modal-head">Head</div>
        <div class="modal-body">Body</div>
        <div class="modal-foot">Foot</div>
    </div>
</div>

最简模态结构是

<div class="modal">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

要激活模态框，只需在 .modal 容器上添加 .active 类。提供的 modal.js 文件实现了打开、关闭和动画模态框的逻辑。

<div class="modal active">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

尺寸

默认情况下，模态框宽度为全宽。你可以应用以下尺寸之一

  • modal-s 宽度为 16rem
  • modal-m 宽度为 32rem
  • modal-l 宽度为 64rem
  • modal-full 宽度和高度均为全屏
  • modal-tablet-full 在平板和手机上宽度和高度均为全屏
  • modal-mobile-full 在手机上宽度和高度均为全屏
<div class="modal">
    <div class="modal-content modal-m">
        <div class="modal-body">Body</div>
    </div>
</div>

你可以组合以下尺寸

<div class="modal">
    <div class="modal-content modal-m modal-tablet-full">
        <div class="modal-body">Body</div>
    </div>
</div>

如果你使用的是basis.css - 尺寸，你也可以使用它。

位置

默认情况下，模态框水平和垂直居中。你可以组合水平和垂直类。

模态水平对齐

  • 左对齐
  • 右对齐

模态垂直对齐

  • 顶部对齐
  • 底部对齐

示例：底部右对齐

<div class="modal bottom right">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

示例：顶部居中对齐

<div class="modal top">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

动画

可用动画

  • modal-fade
  • modal-scale
  • modal-swing

示例

<div class="modal modal-fade">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

JavaScript

注册

注册模态框的 HTML 标记是

<!-- trigger button -->
<span class="button" data-modal-trigger="foo">Open modal</span>

<!-- related modal -->
<div class="modal" data-modal='{"id": "foo"}'>
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

你可以将 modal-close 类添加到任何标签以关闭模态框

<div class="modal" data-modal='{"id": "foo"}'>
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="modal-head"><span class="button modal-close">close</span></div>
        <div class="modal-body">Body</div>
        <div class="modal-foot"><span class="button modal-close">close</span></div>
    </div>
</div>

选项

<div class="modal" data-modal='{"id": "foo", "scroll": "hidden", "closeTriggers": ".modal-close"}'>
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

方法

你可以导入 modals 模块并使用其方法

<script type="module">
    import modals from "modals.js";

    document.addEventListener('DOMContentLoaded', (e) => {
        // get a modal by id:
        const modal = modals.get('ID');
        
        // open modal:
        modal.open();
        
        // close modal:
        modal.close();
        
        // you may check if a modal exists:
        if (modals.has('ID')) {
            modals.get('ID').open();
        }        
    });
</script>

事件

modals.get('ID').listen('open', (modal) => {
    modal.modalEl.querySelector('.modal-body').innerHTML = 'New Body';
});

致谢