本文作者:温文曦

自己写的弹窗,拿去随意更改

温文曦 2020-12-27 1659 2条评论 百度已收录
自己写的弹窗,拿去随意更改摘要: 就一个layui的弹窗,点购买和关闭都有相应提示,样式和结束自己随便改改,但是得会一点JS,适用于所有弹窗,改改就是你的代码。代码:<!DOCTYPE html&g...

自己写的弹窗,拿去随意更改 第1张


就一个layui的弹窗,点购买和关闭都有相应提示,样式和结束自己随便改改,但是得会一点JS,适用于所有弹窗,改改就是你的代码。


代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>弹窗</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
          
 
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
  <button data-method="buy" class="layui-btn">购买</button>
</div>
 
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js" charset="utf-8"></script>
<script>
layui.use('layer', function(){
  var $ = layui.jquery, layer = layui.layer;   
  var active = {
    buy: function(){
      var that = this; 
      layer.open({
        type: 1 
        ,title: '购买'
        ,area: ['390px', '260px']
        ,shade: 0
        ,maxmin: true
        ,offset: [
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ] 
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">我们此后的征途是星辰大海 ^_^</div>'
        ,btn: ['购买', '关闭'] 
        ,yes: function(){
		layer.closeAll();
         layer.msg('购买什么呢?', { icon: 5 });
        }
        ,btn2: function(){
          layer.closeAll();
		  layer.msg('你不购买看看吗?', { icon: 5 });
        }
        
        ,zIndex: layer.zIndex 
        ,success: function(layero){
          layer.setTop(layero); 
        }
      });
    }


  };
  
  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
  
});
</script>

</body>
</html>


文章版权及转载声明

作者:温文曦本文地址:http://vience.cn/blog/547.html发布于 2020-12-27
文章转载或复制请以超链接形式并注明出处文曦博客

赞(4
阅读
分享
 
取消

评论列表 (有 2 条评论,1659人围观)参与讨论
网友昵称:火毅网络无别
火毅网络无别 游客2021-01-13沙发 回复
代码片段是html5代码,但是。。。。右上角显示的是PHP。。。啊这
网友昵称:温文曦
温文曦 博主2021-01-13 回复
@火毅网络无别 请忽略这个小细节,网站html排版有点乱,就用PHP了,而且PHP可以解析html代码,也不算错误