layer.open方法

一、四个按钮代码及效果图

class="ibox-content">
                        

                            type="button" class="btn btn-w-m btn-default" id="open_btn_default">默认
                            type="button" class="btn btn-w-m btn-primary" id="open_btn_primary">页面层
                            type="button" class="btn btn-w-m btn-success" id="open_btn_iframe">iframe层
                            type="button" class="btn btn-w-m btn-info" id="btn_child_frame">getChildFrame
                        
                    

效果图：

二、每个按钮点击后的效果图和代码

2.1 默认按钮

点击后效果图：

代码：

 <script type="text/javascript">
        $("#open_btn_default").on("click", function(){
            var index = layer.open({
                type: 0,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                title: ['我是标题', 'font-size:18px; color:orange;'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                content: 'test',
                btn: ['确定', '取消'],
                yes: function(index, layero){
                    //do something
                    alert("点击了确定");
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                  },
                  btn2: function(index, layero){ 
                      alert("点击了取消");
                      layer.close(index)
                    }
                });
        })
   script>

2.2 页面层按钮

效果图：

代码：

<script type="text/javascript">
    /* 如果是页面层 */
        $("#open_btn_primary").on("click", function(){
            var index = layer.open({
                type: 1,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                title: ['我是标题', 'font-size:18px; color:orange;'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                area: '500px',
                content: $('#show_div')
                });
        })
script>

div代码：

<div class="row col-sm-12" style="display:none;" id="show_div">
        
class="form-horizontal m-t" id="commentForm" novalidate="novalidate">
              <div class="form-group">
                  class="col-sm-3 control-label">姓名：
                  <div class="col-sm-8">
                      id="cname" name="name" minlength="2" type="text" class="form-control" required="" aria-required="true">
                  div>
              div>
              <div class="form-group">
                  class="col-sm-3 control-label">E-mail：
                  <div class="col-sm-8">
                      id="cemail" type="email" class="form-control" name="email" required="" aria-required="true">
                  div>
              div>
              <div class="form-group">
                  class="col-sm-3 control-label">网站：
                  <div class="col-sm-8">
                      id="curl" type="url" class="form-control" name="url">
                  div>
              div>
              <div class="form-group">
                  class="col-sm-3 control-label">说明：
                  <div class="col-sm-8">
                      id</span>=<span class="hljs-string">"ccomment"</span> <span class="hljs-property">name</span>=<span class="hljs-string">"comment"</span> <span class="hljs-type">class</span>=<span class="hljs-string">"form-control"</span> required=<span class="hljs-string">""</span> aria-required=<span class="hljs-string">"true"</span>>
                  div>
              div>
              <div class="form-group">
                  <div class="col-sm-4 col-sm-offset-3">
                      class="btn btn-primary" type="submit">提交
                  div>
              div>
          
    div>

2.3 iframe层，点击后弹出一个页面，因为最大化了。所以铺满了全屏

效果图：

2.4 getChildFrame按钮，也是弹出来一个页面，但是可以在子页面和父页面间相互传递数据，很牛叉！

当前页面效果图：

当前页面代码：

<script type="text/javascript">
/* 获取iframe页的DOM */
        $("#btn_child_frame").on("click", function(){
            layer.open({
                  type: 2,
                  closeBtn: 1,
                  title: "验证表单",
                  area: ['450px','540px'],
                  content: '/manager_test/layer_test/validate_page',
                  success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    //console.log(body.html()) //得到iframe页的body内容
                    //console.log("cname:"+body.find('#cname').val());
                    //var p_o = iframeWin.getObj();
                    //console.log("p_o:"+p_o);
                    //layer.full(index);
                  }
                });
        })
    script>

主要看上面的代码中的注解就好