Semantic UI 之对话框 modal 应用：操作前判断

最新推荐文章于 2023-05-10 22:42:21 发布

菜鸟猫喵喵

最新推荐文章于 2023-05-10 22:42:21 发布

阅读量591

点赞数 4

分类专栏：前端文章标签： html jquery

本文链接：https://blog.csdn.net/qq_45802080/article/details/120092236

版权

前端专栏收录该内容

2 篇文章

订阅专栏

该博客展示了如何在前端实现网页元素删除功能，并通过弹窗进行二次确认操作。使用了Thymeleaf模板引擎、JavaScript和Semantic UI库来创建删除按钮、弹出框和进度条效果。当点击删除按钮时，会触发一个确认对话框，用户可以选择删除或取消。如果选择删除，页面将跳转到删除操作的URL。此外，还提供了一个模拟的删除进度条展示。

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

案例一：

标签

<a href="javascript:void(0);" οnclick="go(this)" th:attr="data-url=${blog.id}" class="ui mini red basic button">删除</a>

弹出框


<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>

js部分


<script type="text/javascript">
 /*!!!!二次确认提示框!!!*/
    function go(obj) {
        // /*<![CDATA[*/
        var url= "[[@{/admin/blogs/}]]"+$(obj).data("url")+"/delete";
        // /*]]>*/
        $(".ui.modal").modal({ //各种回调方法
            onApprove:function () { //单击确认按钮
                console.log("确认");
                window.location.href=url;
            },
            onDeny:function () {  //单击取消按钮
                console.log("拒绝")
            }
        }).modal("show");
        return false;
    };
</script>

注意：如果要在<script></script>中取thymeleaf中的值需要

<script th:inline="javascript"></script>

综合案例

<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>

在这里插入图片描述