Semantic UI 之 对话框 modal

简单对话框

    
        
        进度条
        
        
        
    
    
        
            

            
                确定删除吗？
                
                    删除类型的同时会删除相关的所有文章，确定删除码？
                
                
                    否
                    是
                
            

        
        
            $(".ui.basic.modal").modal("show");
        
    

效果：

对话框事件回调

    
        
        进度条
        
        
        
    
    
        
            
                确定删除吗？
                
                    删除类型的同时会删除相关的所有文章，确定删除码？
                
                
                    否
                    是
                
            
        
        
            $(".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");
        
    

效果： 单击是按钮： 单击否按钮：

综合示例

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

    
        
        进度条
        
        
        
    
    
        
            
                确定删除吗？
                
                    删除类型的同时会删除相关的所有文章，确定删除码？
                
                
                    否
                    是
                
            
        
        
            正在删除
             
                
            
        
        
            //通过JavaScript设置进度值
            $(".ui.progress").progress({
                percent: 70
            });
        
        
            $(".first").modal({
                blurring: true,
                inverted: true
            }).modal("show");
            $(".second").modal(   //在第二个按钮上添加事件
                "attach events",
                ".first .positive.button",
                "show"
            );
        
    

效果：