layer.open方法

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

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

效果图：

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

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">
    	<form class="form-horizontal m-t" id="commentForm" novalidate="novalidate">
              <div class="form-group">
                  <label class="col-sm-3 control-label">姓名：</label>
                  <div class="col-sm-8">
                      <input id="cname" name="name" minlength="2" type="text" class="form-control" required="" aria-required="true">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-3 control-label">E-mail：</label>
                  <div class="col-sm-8">
                      <input id="cemail" type="email" class="form-control" name="email" required="" aria-required="true">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-3 control-label">网站：</label>
                  <div class="col-sm-8">
                      <input id="curl" type="url" class="form-control" name="url">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-3 control-label">说明：</label>
                  <div class="col-sm-8">
                      <textarea id="ccomment" name="comment" class="form-control" required="" aria-required="true"></textarea>
                  </div>
              </div>
              <div class="form-group">
                  <div class="col-sm-4 col-sm-offset-3">
                      <button class="btn btn-primary" type="submit">提交</button>
                  </div>
              </div>
          </form>
    </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>

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