STModalDemo 开源项目教程

沈昂钧

于 2024-08-22 10:04:58 发布

阅读量738

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00311/article/details/141420401

版权

STModalDemo 开源项目教程

STModalDemo弹出视图（通知，提示，选择，窗口）项目地址:https://gitcode.com/gh_mirrors/st/STModalDemo

项目介绍

STModalDemo 是一个用于展示模态框（Modal）的开源项目，由开发者 zhenlintie 创建并维护。该项目旨在提供一个简单易用的模态框实现，适用于各种前端开发场景。STModalDemo 基于 JavaScript 编写，支持自定义样式和内容，可以轻松集成到任何 Web 应用中。

项目快速启动

安装

首先，克隆项目到本地：

git clone https://github.com/zhenlintie/STModalDemo.git

进入项目目录：

cd STModalDemo

使用

在 HTML 文件中引入必要的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>STModalDemo</title>
    <link rel="stylesheet" href="path/to/stmodal.css">
</head>
<body>
    <button id="openModal">打开模态框</button>

    <script src="path/to/stmodal.js"></script>
    <script>
        document.getElementById('openModal').addEventListener('click', function() {
            STModal.show({
                title: '提示',
                content: '这是一个模态框示例。',
                onConfirm: function() {
                    console.log('确认');
                },
                onCancel: function() {
                    console.log('取消');
                }
            });
        });
    </script>
</body>
</html>