layer弹出层

layer简单实例

样式文件：layui.css, layerpage.css（见下边链接）

js文件：layer.js ; jquery.js

body部分

<div id="container">
      <div id="content">
           <textarea class="contents" disabled="true"></textarea>
      </div>
      <div id="btnDiv">
            <button id="btn">弹出层</button>
            <button id="clear">清空</button>
       </div>
</div>

DOM操作部分

$('#btn').on('click', function(){
     var index = layer.open({
     title:"留言板",
     type: 1, //弹出层类型
     area: ['360px', '270px'], //宽，高
     shadeClose: false, //点击遮罩关闭
     closeBtn:false, //右上角关闭按钮
     anim:1,
     resize:false,
     content: '<textarea id="define" onchange="this.value=this.value.substring(0, 60)" onkeydown="this.value=this.value.substring(0, 60)"         onkeyup="this.value=this.value.substring(0, 60)" placeholder="请输入内容"></textarea>'
});

$("#define").after("<button id='msgBtn'>留言</button><button id='cancel'>取消</button>");
    //在留言面板后添加按钮
    $("#cancel").click(function(){
         layer.close(index);
    });
//关闭弹出层

   $("#msgBtn").click(function(){
      var message = $("#define").val();
      var mydate = new Date();
      var year = mydate.getFullYear();
      var month = mydate.getMonth()+1;
      var day = mydate.getDate();
      var h = mydate.getHours();
      var m = mydate.getMinutes();
      var s = mydate.getSeconds();
      $(".contents").append('&ensp;'+year+'-'+month+'-'+day+' '+dateFormat(h)+':'+dateFormat(m)+':'+dateFormat(s)+'\n').append('&ensp;'+message+'\n');
      layer.close(index);
      });

    /**
     * @function 实现时间的格式化
     * @param 时间参数
     */
    function dateFormat(param){
           return param < 10 ? '0'+param : param;
     }
});

$('#clear').click(function(){
       $('.contents').val('');   //清空文本内容
       window.location.reload();  //页面刷新
})

 

 layerpage.css   https://github.com/YanBoJu1117/YanBoJu1117.github.io/commit/1eff94c1631cf9af3d397b657df8d68ab244a3fd