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

程序员文章站 2022-03-07 17:05:12

...

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

问题描述：
js项目使用layui弹框，在弹框中需要有一个动态生成的日期选择控件（使用bootstrapDatepicker）。控件的input是生成了，但是在点击input的时候日期控件的弹出框位置却不在input周围（bootstrapDatepicker，easyui日期控件，My97日期控件都会出现此类问题）。类似于下图所示（下图用的是My97日期控件）
layui弹框中日期控件出现位置错误问题解决

解决办法：
在弹框容器中建立一个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>

下图是正常加载的样子（故意让不正常的存在做一下对比）：
layui弹框中日期控件出现位置错误问题解决

下图是我使用的My97日期控件目录结构（文档丰富，兼容性好，*度高，值得推荐的一个日期控件）
layui弹框中日期控件出现位置错误问题解决

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