16、Semantic-UI之模态窗口

最新推荐文章于 2021-08-23 19:19:14 发布

weixin_30648963

最新推荐文章于 2021-08-23 19:19:14 发布

阅读量526

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/jie-fang/p/10279573.html

版权

16.1 定义模态窗口

示例：定义基础的模态窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".ui.green.button").on("click",function () {
                $(".ui.modal").modal("show");
            })
        })
    </script>
</head>
<body style="padding: 20px;">
    <div class="ui container">
        <div class="ui modal">
            <div class="header"><i class="user icon"></i>用户信息</div>
            <div class="content">
                <p>Staryjie，您好，欢迎来到XXXX!</p>
            </div>
        </div>
        <button class="ui green button">查看</button>
    </div>
</body>
</html>

示例：为模态窗口添加关闭按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".ui.green.button").on("click",function () {
                $(".ui.modal").modal("show");
            })
        })
    </script>
</head>
<body style="padding: 20px;">
    <div class="ui container">
        <div class="ui modal">
            <i class="close icon"></i>
            <div class="header"><i class="user icon"></i>用户信息</div>
            <div class="content">
                <p>Staryjie，您好，欢迎来到XXXX!</p>
            </div>
        </div>
        <button class="ui green button">查看</button>
    </div>
</body>
</html>

示例：设置模态窗口的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".ui.green.button").on("click",function () {
                $(".ui.modal").modal("show");
            })
        })
    </script>
</head>
<body style="padding: 20px;">
    <div class="ui container">
        <div class="ui tiny modal">
            <i class="close icon"></i>
            <div class="header"><i class="user icon"></i>用户信息</div>
            <div class="content">
                <p>Staryjie，您好，欢迎来到XXXX!</p>
            </div>
        </div>
        <button class="ui green button">查看</button>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/jie-fang/p/10279573.html

weixin_30648963

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
16、Semantic-UI之模态窗口

16.1 定义模态窗口示例：定义基础的模态窗口<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Semantic UI </title>  &...
复制链接

扫一扫