layer框架的用法

1.layer.open函数

layer.open({
	title:'<div style="margin-left:100px;">提示</div>',
	content: '<div style="text-align:center;color:#000">'+data.data+'</div>',
	btnAlign: 'c', //按钮居中btnAlign: 'l'，按钮左对齐，btnAlign: 'r'，按钮右对齐。默认值，不用设置
	closeBtn: 0,   //右上角没有关闭按钮，默认为1
	shade：[0.8,'#393D49']; //默认是0.3透明度的黑色背景（'#000'）,如果你不想显示遮罩，可以shade: 0,
	shadeClose: //是否点击遮罩关闭,默认：false
	time：5000，//自动关闭所需毫秒，5000即5秒
        anim:弹出动画0：//平滑放大。默认，1：从上掉落，2: 从最底部往上滑入,3, 从左滑入,4: 从左翻滚,5: 渐显,6: 抖动
        scrollbar:false,//默认弹窗弹出来后，遮罩后面的背景是可以上下滑动的，false就不能滑动了
        skin: 'layui-layer-nobg',//去掉layerui-layer的白色背景
	yes: function(index, layero) {  //点击确定回调跳转
        window.location.href='http://137.43.234.322/db/db?userid='+userid;
	                    return false;
	                },
	cancel: function(){  //右上角的关闭按钮回调跳转
     	window.location.href='http://137.43.234.322/db/db?userid='+userid;
    					return false;
  					}
});

//关闭
$('.back').click(function(){
	layer.closeAll();
})

参考：http://www.layui.com/doc/modules/layer.html

 

2.为什么layer中弹出层内容点击事件不起作用

 

1.click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的
2.而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件            
不起作用：
$('#test').on('click', function() {
    layer.msg('响应点击事件');
});
起作用了：
$(document).on('click', '#test', function() {
    layer.msg('响应点击事件');
});

3.layer.open 获取不到表单信息

表单：

<div class="orderHouse none">
    <ul class="order-house-messige">
        <form id="order-form" class="mui-input-group common-input-group order-house-group" data-action="<{:U('ordering')}>">
        <li>
            <span>看房时间</span>
            <input type="text" class="input-normal order-time" name="time" placeholder="请选择看房时间"/>
        </li>
        <li>
            <span>联系方式</span>
            <input type="tel" class="input-normal" data-value="123123" name="mobile" placeholder="155****5892" />
        </li>
        <li>
            <span class="fn-left">备注</span>
            <textarea rows="5" cols="54" name="content" placeholder="请输入备注"></textarea>
        </li>
        <li>
            <span>  </span>
            <button type="button" class="btn btn-primary btn-lg order-messige-btn">提交看房申请</button>
        </li>
        </form>
    </ul>
</div>

JS:

layer.open({
    type: 1,
    title: [
        '申请预约看房',
        'background-color:#fff; border-bottom:solid 1px #e5e5e5; margin-top: 0;height: 60px;line-height: 60px; font-size:18px;'
    ],
    closeBtn:2,
    area: ['570px','400px'],
    content: $('.orderHouse').html(),
    success:function(){
        //申请成功
        $('.order-messige-btn').on('click',function() {
            alert($("textarea").val());
        });
    }
});$('.orderHouse').html(),
    success:function(){
        //申请成功
        $('.order-messige-btn').on('click',function() {
            alert($("textarea").val());
        });
    }
});

 

在此处报了一个错误：layer.open弹出框不能获取input框的值为空

 

点击保存就是不能获取input的值，总是为空字符串。

后来在网上查找资料，原来这是个比较普遍的bug，原来是layer.open的content参数（上面红色标记代码），应该写成

content: $('.orderHouse'),不要后面的html(),去掉后调试正常获取了input的值