《layUI 弹出层 and 按钮》-蒲公英云

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>按钮 and 弹出层</title>
</head>
<body>
<!-- layUI css插件引用标签 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
<!-- 模块化用法引用标签 -->
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 非模块化用法引用标签（一次性加载所有插件，方便，但性能低） -->
<%-- <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script> --%>
<script type="text/javascript">
//JavaScript代码区域
  layui.use(['element','layer'], function(){
      var layer = layui.layer,
      element = layui.element;
//      layer.msg(treeNode.id+" , "+treeNode.name + " , " +treeNode.checked);
  layer.ready(function(){
        layer.msg('很高兴一开场就见到你');
  });      
  document.getElementById('Button1').onclick = function () {
      layer.open({
          type: 2, //弹出层类别:layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
          closeBtn: 1, //关闭按钮显示0-2
          btnAlign: 'c', //按钮居中对齐 I-C-R
          fixed: false, //即鼠标滚动时，层是否固定在可视区域(true/false是否开启)
          title: "弹出层！", //标题
          shade: 0, //弹框外的区域是否覆盖
          //shadeClose:false, // 是否点击遮罩关闭
          area: ['340px', '215px'], //弹出层大小
          resize:true, //是否允许拉伸,该参数对loading、tips层无效
          moveOut:true, // 是否允许拖拽到窗口外
       /* offset: 'auto'     默认坐标，即垂直水平居中
          offset: '100px'     只定义top坐标，水平保持居中
          offset: ['100px', '50px']     同时定义top、left坐标
          offset: 't'     快捷设置顶部坐标
          offset: 'r'     快捷设置右边缘坐标
          offset: 'b'     快捷设置底部坐标
          offset: 'l'     快捷设置左边缘坐标
          offset: 'lt'     快捷设置左上角
          offset: 'lb'     快捷设置左下角
          offset: 'rt'     快捷设置右上角
          offset: 'rb'     快捷设置右下角*/
          offset: 'auto', //坐标 
          time: 5000, //自动关闭时间（毫秒）
          isOutAnim: true, //关闭动画(true/false是否开启)
          anim: 2, //弹出方式0-6
          content: ['HtmlPage2.html', 'no'], //iframe的url，no代表不显示滚动条
          end: function () { //关闭后回调函数
              //alert('关闭！');
              layer.msg('关闭！');
          }
      });
  }
  document.getElementById('Button2').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button3').onclick = function () {
      layer.open({
          type: 1, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          shadeClose:true, // 是否点击遮罩关闭
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button4').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button5').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button6').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          shade: 0, //弹框外的区域是否覆盖
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button7').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          shade: 0, //弹框外的区域是否覆盖
          area: ['340px', '215px'], //弹出层大小
          offset: 'lt', //坐标 
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button8').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          shade: 0, //弹框外的区域是否覆盖
          area: ['340px', '215px'], //弹出层大小
          offset: 'lb', //坐标 
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button9').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          shade: 0, //弹框外的区域是否覆盖
          area: ['340px', '215px'], //弹出层大小
          offset: 'rt', //坐标 
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button10').onclick = function () {
      layer.open({
          type: 0, //弹出层类别
          title: "弹出层！", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          shade: 0, //弹框外的区域是否覆盖
          area: ['340px', '215px'], //弹出层大小
          offset: 'rb', //坐标
          cancel: function(index, layero){ 
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false; 
            }    
       });
  }
  document.getElementById('Button11').onclick = function () {
    //eg2
     layer.open({
      content: 'test'
      ,btn: ['按钮一', '按钮二', '按钮三']
      ,yes: function(index, layero){
        //按钮【按钮一】的回调
          layer.msg("按钮【按钮一】的回调");
      }
      ,btn2: function(index, layero){
        //按钮【按钮二】的回调
        layer.msg("按钮【按钮二】的回调");
        //return false 开启该代码可禁止点击该按钮关闭
      }
      ,btn3: function(index, layero){
        //按钮【按钮三】的回调
        layer.msg("按钮【按钮三】的回调");
        //return false 开启该代码可禁止点击该按钮关闭
      }
      ,cancel: function(){ 
        //右上角关闭回调
        layer.msg("关闭回调");
        //return false 开启该代码可禁止点击该按钮关闭
      }
    });
  }
  document.getElementById('Button12').onclick = function () {
    //eg1--信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
    // layer.alert('酷毙了', {icon: 1});
    //eg2
    // layer.msg('不开心。。', {icon: 5});
    //eg3
     layer.load(1); //风格1的加载
  }
  document.getElementById('Button13').onclick = function () {
           //eg1       
           layer.confirm('弹出层', {
            btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
            ,btn3: function(index, layero){
              //按钮【按钮三】的回调
                layer.open({
                    type: 0, //弹出层类别
                    title: "按钮弹出层3", //标题
                    closeBtn: 1, //关闭按钮显示
                    btnAlign: 'c', //按钮居中对齐
                    area: ['340px', '215px'], //弹出层大小
                    offset: 'auto', //中间
                 });
            }
          },function(index, layero){
            //按钮【按钮一】的回调
              layer.open({
                  type: 0, //弹出层类别
                  title: "按钮弹出层1", //标题
                  closeBtn: 1, //关闭按钮显示
                  btnAlign: 'c', //按钮居中对齐
                  area: ['340px', '215px'], //弹出层大小
                  offset: 'auto', //中间
               });
          },function(index){
            //按钮【按钮二】的回调
              layer.open({
                  type: 0, //弹出层类别
                  title: "按钮弹出层2", //标题
                  closeBtn: 1, //关闭按钮显示
                  btnAlign: 'c', //按钮居中对齐
                  area: ['340px', '215px'], //弹出层大小
                  offset: 'auto', //中间
               });
          });
  }
  });  
</script> 
<br>
<br>
<br>
 <h5>按钮</h5>                            <!-- 默认按钮                       样式                                   大小                                 圆角    -->
<button id="Button1" type="button" class="layui-btn layui-btn-normal layui-btn-lg layui-btn-radius">弹出层</button>
<br>
<br>
<br>
<!-- 按钮组 -->
 <h5>按钮组</h5>
<div class="layui-btn-group">
  <button id="Button2" type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button id="Button3" type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button id="Button4" type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button id="Button5" type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>
<br>
<br>
<br>
<!-- 按钮容器 -->
 <h5>按钮容器</h5>
<div class="layui-btn-container">
  <button id="Button6" type="button" class="layui-btn">默认按钮</button> 
  <button id="Button7" type="button" class="layui-btn layui-btn-primary">原始按钮</button>
  <button id="Button8" type="button" class="layui-btn layui-btn-normal">百搭按钮</button> 
  <button id="Button9" type="button" class="layui-btn layui-btn-warm">暖色按钮</button> 
  <button id="Button10" type="button" class="layui-btn layui-btn-danger">警告按钮</button> 
  <button class="layui-btn layui-btn-disabled">禁用按钮</button> 
</div>
<br>
<br>
<br>
<!-- 图标按钮 -->
 <h5>图标按钮</h5>
<button id="Button11" type="button" class="layui-btn">
  <i class="layui-icon"></i> 添加
</button>
<button id="Button12" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">ဂ</i>
</button>
<br>
<br>
<br>
<!-- 流体按钮（最大化适应） -->
 <h5>流体按钮（最大化适应）</h5>
<button id="Button13" type="button" class="layui-btn layui-btn-fluid">流体按钮</button>
</body>
</html>