easyui的弹出浮层（加载中...）的效果

最新推荐文章于 2021-08-12 11:45:14 发布

一名写前端的GISer

最新推荐文章于 2021-08-12 11:45:14 发布

阅读量1.4k

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/wangchaohpu/article/details/82855410

版权

easyui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//采用jquery easyui loading css效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title111</title>
    <!--引入jquery-->
    <script src="../jquery.js"></script>
    <!--引入easyui样式-->
    <link rel="stylesheet" href="../easyui.css"/>
</head>
<body>
    <script>
        $(function () {
            dataLoading("加载中。。。");
            setTimeout(dataLoadEnd(),30000);
        })

        //采用jquery easyui loading css效果
        function dataLoading(msg){
            /*
                1、.datagrid-mask-msg样式在easyui.css中写好了；
                2、appendTo(选择器);即要将提示信息显示在什么位置；
             */
            //实例1
            $("<div class=\"datagrid-mask-msg\" style=\"z-index:9999;\"></div>").html(msg).appendTo("body").css({display:"block",position:"fixed",left:($(document.body).outerWidth(true) - 190) / 2,bottom:($(window).height() ) / 2});
            //实例2
           $("<div class=\"datagrid-mask-msg\"></div>").html("数据正在加载，请稍候。。。").appendTo("#tableDg").css({display:"block",left:$("#tableDg").width()/4,top:$("#tableDg").height()/2});
        }
        //关闭提示信息
        function dataLoadEnd(){
            $(".datagrid-mask-msg").remove();
        }
    </script>
    <div>
        <div id="tableDg" style="width: 500px;height: 500px;background: #0e90d2"></div>
    </div>
</body>
</html>

一名写前端的GISer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui的弹出浮层（加载中...）的效果

//采用jquery easyui loading css效果&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title111&lt;/title&gt; &lt;!--引入jquery-
复制链接

扫一扫