layui弹框中日期控件出现位置错误问题解决

最近几天忙项目,被一个弹框中的日期控件出现位置不正确的问题纠缠了三天,就在刚才,逛完街回来打开电脑捣鼓了一下终于将这个问题解决了。


问题描述:
js项目使用layui弹框,在弹框中需要有一个动态生成的日期选择控件(使用bootstrapDatepicker)。控件的input是生成了,但是在点击input的时候日期控件的弹出框位置却不在input周围(bootstrapDatepicker,easyui日期控件,My97日期控件都会出现此类问题)。类似于下图所示(下图用的是My97日期控件)
这里写图片描述

解决办法:
在弹框容器中建立一个input日期选择空间,状态为隐藏。当然在进行动态添加的时候克隆一个刚才隐藏的日期控件然后动态添加进入就好了。解决代码如下:

操作页面:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--header 作为公共模版分离出去-->
    <jsp:include page="/static/commonviews/header.jsp"/>
    <script language="javascript" type="text/javascript" src="<%=request.getContextPath() %>/static/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

<input type="button" value="弹出框" onclick="dialog()" />

<!--footer 作为公共模版分离出去-->
<jsp:include page="/static/commonviews/footer.jsp"/>
<script type="text/javascript">
    function dialog(){
        console.log(getRequestUrl());
        layer.open({
            type:2,
            title: '弹出框测试',
            area:['600px','500px'],
            skin:'layer-window',
            shadeClose:false,
            content:[getRequestUrl() + '/views/homePage/dialog.jsp','yes'],
            btn:['确定','关闭'],
            success:function (layero,index) {
                var body=layer.getChildFrame('body',index);
                var container = body.find("#container")[0];
                //动态生成位置有问题的控件
                $("<input />",{
                    type: 'text',
                    val:'',
                    class: 'Wdate',
                    click: function () {
                        WdatePicker({dateFmt:'yyyy-MM-dd'})
                    }
                }).appendTo(container);

        //动态生成位置没问题的日期控件
                var WdateTaxSoft = body.find("#WdateTaxSoft")[0];
                //测试循环生成
                for(var i=0;i<3;i++){
                    //复制一个日期控件手脚架
                    var inputDate = $(WdateTaxSoft).clone(true);

                    $(inputDate).show();

                    $(inputDate).attr({
                        controlType: 'date',
                        val: '125'
                    }).appendTo(container);

                    $("<button />",{
                        val:'日期按钮',
                        click: function(){
                            //console.log($(this).prev());
                            console.log($(this).prev().val());
                        }
                    }).appendTo(container);
                }
            },
            yes:function (ix) {
                /*
                layer.close(ix);
                */
            }
        });
    }
</script>
</body>
</html>

弹框代码:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--header 作为公共模版分离出去-->
    <jsp:include page="/static/commonviews/header.jsp"/>
    <script language="javascript" type="text/javascript" src="<%=request.getContextPath() %>/static/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<%--用于动态生成的日期选择控件手脚架--%>
<input class="Wdate" id="WdateTaxSoft" style="display: none" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})" />
<div id="container" style="width: 100%; height: 100%;" >
    <h2>这里面是container</h2>
</div>
<!--footer 作为公共模版分离出去-->
<jsp:include page="/static/commonviews/footer.jsp"/>
</body>
</html>

下图是正常加载的样子(故意让不正常的存在做一下对比):
这里写图片描述

下图是我使用的My97日期控件目录结构(文档丰富,兼容性好,自由度高,值得推荐的一个日期控件)
这里写图片描述

问题反思:
为什么一个简单的问题会浪费将近三天时间来解决呢?关键在于没有从源头上来思考这个问题出现的原因。一开始只是一昧的去找是不是控件的自身bug,忽略了动态加载本身有没有问题,作为前端小白一枚,怀疑是动态加载的时候把日期控件的父容器当成了body。经过大量尝试(浪费时间。。。),发现很多常用的日期控件在动态加载拼接的时候都会出现类似问题,不过使用上述方法能否修复我没有尝试(只是用了My97)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值