弹出层的使用

Original 2019-03-12 17:40:46 236
abstract:<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8">  <link rel="stylesheet" type="text/css" href="../stati

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">

  <script type="text/javascript" src="../static/plugins/layui/layui.js"></script>

  <style>

    body{padding: 15px;}

    .header{border-bottom: 2px #009688 solid;height: 38px;}

    .headerl{float:left;background: #009688;color: #fff;line-height: 38px;margin-left: 35px;}

    .headerr{float: right;}

  </style>

</head>

<body>

<div class="header">

    <div class="headerl">管理员列表</div>

    <button class="layui-btn headerr">一个标准的按钮</button>

</div>



<table class="layui-table">

    <colgroup>

      <col width="150">

      <col width="200">

      <col>

    </colgroup>

    <thead>

      <tr>

        <th>昵称</th>

        <th>加入时间</th>

        <th>签名</th>

        <th>操作</th>

      </tr> 

    </thead>

    <tbody>

      <tr>

        <td>贤心</td>

        <td>2016-11-29</td>

        <td>人生就像是一场修行</td>

        <td><button class="layui-btn layui-btn-normal addedit" onclick="add()">添加</button><button class="layui-btn layui-btn-danger" onclick="del()">删除</button></td>

      </tr>

      <tr>

        <td>许闲心</td>

        <td>2016-11-28</td>

        <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>

        <td><button class="layui-btn layui-btn-normal addedit" onclick="add()">添加</button><button class="layui-btn layui-btn-danger" onclick="del()">删除</button></td>

      </tr>

      <tr>

        <td>许闲心</td>

        <td>2016-11-28</td>

        <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>

        <td><button class="layui-btn layui-btn-normal addedit" onclick="add()">添加</button><button class="layui-btn layui-btn-danger" onclick="del()">删除</button></td>

      </tr>

      <tr>

        <td>许闲心</td>

        <td>2016-11-28</td>

        <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>

        <td><button class="layui-btn layui-btn-normal addedit" onclick="add()">添加</button><button class="layui-btn layui-btn-danger" onclick="del()">删除</button></td>

      </tr>


    </tbody>

</table>


<script type="text/javascript">

    layui.use('layer', function(){

    var layer = layui.layer;  

    layer.msg('hello');

    }); 



    function del(){

    //eg1       

      layer.confirm('纳尼?', {

          btn: ['按钮一', '按钮二'] //可以无限个按钮


      }, function(index, layero){

        //按钮【按钮一】的回调

      }, function(index){

        //按钮【按钮二】的回调

      });   

    }


    function add(){

      layer.open({

        type: 2, 

        title:"添加容器",

        content: '传入任意的文本或html' //这里content是一个普通的String

      });

    }

</script>



</body>

</html>


Correcting teacher:韦小宝Correction time:2019-03-12 17:54:00
Teacher's summary:写的很不错 layui中的弹出层还是比较好用的 而且样式也很多 使用起来很灵活 没事的时候可以去研究研究

Release Notes

Popular Entries