网站首页 关于作者

Layui下的layer使用iframe弹出层

  • 2019-11-28 08:53:00
  • 1705已阅读
简介懒得写啦

许久没写博客了,今天蹭一波layer的热度,讲一下简单的使用。没必要那么复杂。


首先要引入,layui的基本文件和layer的,layer的我找了半天没找到。在咱们学校的网课端看到了???!!!


<script type="text/javascript" src="http://hnust.hunbys.com/plugins/layer/layer.js"></script>
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
   <link href="/static/layui/layui/css/layui.css" rel="stylesheet" media="all">
    <script src="/static/layui/layui/layui.js" type="text/javascript"></script>

接下来就简单了,比如我点击一个按钮打开弹出层(调用js函数,因为我是php的框架,大家不用看参数)。


<button class="layui-btn layui-btn-sm layui-btn-danger"
                                    onclick="opter_('{$item.no}')">删除
</button>

接下来就是js文件了,记得加js的标签



  function opter_(id) {
            layui.use('layer', function () {
                layer.open({
                    type: 2,   //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                    title: '录取',   //tittle
                    area: ['1000px', '600px'],   //width , height
                    content: 'https://www.sumtudou.cn', //url,填个百度都行
                    success: function (layero, index) {
                    },
                    end: function () {
                       location.reload();
                    }
                });
            });
        }

 


效果图如下

hhh.jpg


Top