layer弹层基本参数初尝试

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layer-更懂你的web弹窗解决方案</title>

  <style>
  .none{display:none}
.x_Popup {
    width: 330px;
    height: 120px;
    padding: 10px;
}
.x_Popup p i{vertical-align: middle;}
/*demo-class是layer弹窗可以自定义的样式 通过skin来调用*/
  .demo-class .layui-layer-btn a.layui-layer-btn0{
    background: #279eb7;
    outline: none;
    border-color: #279eb7
  }
  .demo-class .layui-layer-title {
    padding: 0 80px 0 10px;
    color: #fff;
    background-color: #279eb7;
    font-size: 16px;
}
  </style>
  
  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
<button id="Sign_out">点击</button>
<div class="x_Popup Sign_out none">
  <p class="f16 tc pt30 c333"><i class="iconfont juse f30">&#xeb52;</i> 您确定要退出么?</p>
</div>
<script>
    $('#Sign_out').on('click', function(){   
       layer.open({  
                  skin:'demo-class', //调用自定义样式
                  type: 1, //基本层类型
                  title:'提示',
                  closeBtn: 1,//关闭按钮
                  shift:0,//动画
                  shadeClose: true,//是否点击遮罩关闭
                  maxWidth:380,
                  content: ($(".Sign_out")),
                  btn:["确定","取消"]
                }); 
      });
    
    </script>
</body>
</html>

这是layer官网弹层所有参数链接地址:http://layer.layui.com/api.html#tips

原文地址:https://www.cnblogs.com/fkcqwq/p/7851459.html