当前位置: 首页 > 编程笔记 >

layer弹出层倒计时关闭的实现方法

滑景胜
2023-03-14
本文向大家介绍layer弹出层倒计时关闭的实现方法,包括了layer弹出层倒计时关闭的实现方法的使用技巧和注意事项,需要的朋友参考一下

因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部分:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <script>
    function func1() {
        var i = 9;
        var interval;
        layer.confirm('是否提交?', {
          btn: [i+1+'s后可提交','退出'], //按钮
          skin: 'layui-layer-molv',
          success: function(a,b){
            $(".layui-layer-btn0").css("backgroundColor","#92B8B1");
            var fn = function() {
      //       layer.title(i+' 秒后,系统将自动退出并关闭。',b);
              $(".layui-layer-btn0").text(i+'s后可提交');
              i--;
            };
            interval = setInterval(function(){
                fn();
                if(i === 0){
                  $(".layui-layer-btn0").css("backgroundColor","#019F95");
                  $(".layui-layer-btn0").text('提交');
                  clearInterval(interval);
                }
              }, 1000);
          },
          end:function(){
            clearInterval(interval);
          }
          }, function(){
            if(i<=0) {
                 layer.msg('已提交', {icon: 1});
              }
        
          }, function(){
            clearInterval(interval);
             layer.msg('已关闭', {icon: 1});
          
          });
      }
    </script>
    <button id="func1" onclick="func1();">询问框</button>
  </body>
</html>

以上这篇layer弹出层倒计时关闭的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法,包括了layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法的使用技巧和注意事项,需要的朋友参考一下 昨天layer插件弹出层关闭问题弄的我直挠头,短短几行代码,用了我将近2个钟头才解决。我的使用场景是这样。在页面中用layer.open弹出一个层,在层内是微信支付二维码,客户扫码支付。支付成功后关闭此弹出层,并提示

  • 本文向大家介绍layer 关闭指定弹出层的例子,包括了layer 关闭指定弹出层的例子的使用技巧和注意事项,需要的朋友参考一下 首先,弹出某个层时需要给层取名(赋值),如: 需要关闭指定的弹出层时,直接: 如果在弹出层中写js,将弹出层自身关闭,可以先获取到弹出层名字,再将其关闭 以上这篇layer 关闭指定弹出层的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教

  • 本文向大家介绍layer实现弹出层自动调节位置,包括了layer实现弹出层自动调节位置的使用技巧和注意事项,需要的朋友参考一下 项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现 layer.iframeAuto方法可以实现,这里吐槽一点,ie浏览器的html没有被body撑大,而iframeAuto方法是根据html的高度计算的,导

  • 本文向大家介绍js实现div弹出层的方法,包括了js实现div弹出层的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看。 这个不用多说了,直接

  • 本文向大家介绍Layer弹出层动态获取数据的方法,包括了Layer弹出层动态获取数据的方法的使用技巧和注意事项,需要的朋友参考一下 前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能

  • 本文向大家介绍jQuery实现点击按钮弹出可关闭层的浮动层插件,包括了jQuery实现点击按钮弹出可关闭层的浮动层插件的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件。分享给大家供大家参考。具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口。默认不带样式,大家可以根据自己的项目写样式。弹出层代码很