使用layui彈出視窗新增進度條操作。
阿新 • • 發佈：2020-12-10
這個效果就是，點選一個詢問層視窗，確定之後就會出現一個彈出框，彈出框會顯示進度條，進度條結束後自動關閉視窗。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="../../Content/layui/css/layui.css" rel="stylesheet" /> </head> <body> <input type="button" name="load"value="載入" class="layui-btn" /> <div style="display:none;" id="show"> <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true"> <div class="layui-progress-bar" lay-percent="0%"></div> </div> </div> <script src="../../Content/layui/layui.js"></script> <script src="../../Content/jquery/jquery-1.7.2.js"></script> <script> layui.use(['layer', 'element'], function () { var layer = layui.layer, element = layui.element; $("input[name='load']").click(function () { var t = 1, fun; var confirm = layer.confirm("執行", function () { layer.close(confirm); var show = layer.open({ type: 1, content: $("#show"), success: function (layero, index) { fun = setInterval(function () { element.progress('demo', t + '%'); if (t >= 100) { clearInterval(fun); layer.close(show); } else { t++; } }, 100) }, end: function () { element.progress('demo', '0%'); clearInterval(fun); } }); }); }); </script> </body> </html>
轉載：https://blog.csdn.net/tatetianos/article/details/102820198