[JavaScript知识库] Semantic UI 之对话框 modal 应用：操作前判断

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Semantic UI 之对话框 modal 应用：操作前判断 -> 正文阅读

[JavaScript知识库]Semantic UI 之对话框 modal 应用：操作前判断

案例一：

标签

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

综合案例

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

在这里插入图片描述