Semantic UI 之对话框 modal

最新推荐文章于 2021-09-03 23:33:30 发布

梁云亮

最新推荐文章于 2021-09-03 23:33:30 发布

阅读量1.4k

点赞数 4

分类专栏： # Semantic UI 文章标签： Semantic UI 对话框 modal

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107917946

版权

Semantic UI 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用Semantic UI创建对话框与进度条，包括简单的对话框展示、事件回调功能以及综合示例，演示了如何通过JavaScript设置进度条百分比，并在第一个对话框确认后触发第二个对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单对话框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
        <div class="ui container">
            <img src="imgs/lyl.jpg" class="ui centered image big">

            <div class="ui small basic modal">
                <div class="header title">确定删除吗？</div>
                <div class="content">
                    删除类型的同时会删除相关的所有文章，确定删除码？
                </div>
                <div class="actions">
                    <button class="ui negative button">否</button>
                    <button class="ui positive button">是</button>
                </div>
            </div>

        </div>
        <script>
            $(".ui.basic.modal").modal("show");
        </script>
    </body>
</html>

效果：
在这里插入图片描述

对话框事件回调

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
        <div class="ui container">
            <div class="ui modal">
                <div class="header title">确定删除吗？</div>
                <div class="content">
                    删除类型的同时会删除相关的所有文章，确定删除码？
                </div>
                <div class="actions">
                    <button class="ui negative button">否</button>
                    <button class="ui positive button">是</button>
                </div>
            </div>
        </div>
        <script>
            $(".ui.modal")
                .modal({ //各种回调方法
                    onShow: function () {
                        console.log("正在显示");
                    },
                    onVisible: function () {
                        console.log("完全显示");
                    },
                    onHide: function () {
                        console.log("开始隐藏");
                    },
                    onHidden: function () {
                        console.log("完全隐藏");
                    },
                    onApprove:function () { //单击确认按钮
                        console.log("确认")
                    },
                    onDeny:function () {  //单击取消按钮
                        console.log("拒绝")
                    }
                })
                .modal("show");
        </script>
    </body>
</html>

效果：
在这里插入图片描述
单击是按钮：

单击否按钮：

综合示例

单击第一个对话框中的是按钮，打开第二个对话框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
        <div class="ui container">
            <div class="ui modal first">
                <div class="header title">确定删除吗？</div>
                <div class="content">
                    删除类型的同时会删除相关的所有文章，确定删除码？
                </div>
                <div class="actions">
                    <button class="ui negative button">否</button>
                    <button class="ui positive button">是</button>
                </div>
            </div>
        </div>
        <div class="ui modal second">
            <div class="ui header title">正在删除</div>
            <div class="ui progress"> <!--此处直接使用 data-percent="32"没有效果-->
                <div class="bar"></div>
            </div>
        </div>
        <script type="text/javascript">
            //通过JavaScript设置进度值
            $(".ui.progress").progress({
                percent: 70
            });
        </script>
        <script>
            $(".first").modal({
                blurring: true,
                inverted: true
            }).modal("show");
            $(".second").modal(   //在第二个按钮上添加事件
                "attach events",
                ".first .positive.button",
                "show"
            );
        </script>
    </body>
</html>