layui遇坑合集

layer.open参数type为1时，content为dom元素时，
比如content: $("#dissatisfiedCauseForm")；
style属性应为"display: none"，否则会出现渲染问题

<div id="dissatisfiedCauseForm" style="display: none">
    <form class="layui-form">
        <div>
            <div class="pt-20 pr-20 cl">
                <label class="form-label col-xs-3"><span class="c-red">*</span>原因</label>
                <div class="formControls col-xs-9">
                    <select xm-select="dissatisfiedCause" id="dissatisfiedCause" xm-select-search=""
                            xm-select-search-type="dl" xm-select-radio xm-select-skin="normal">
                                                <c:forEach items="${dissatisfiedCause}" var="item">
                                                    <option value="${item.value}">${item.name}</option>
                                                </c:forEach>
                    </select>
                </div>
            </div>
            <div class="pt-20 pr-20 cl" id="elseCauseDiv" style="display: none">
                <label class="form-label col-xs-3">其他</label>
                <div class="formControls col-xs-9">
                    <textarea type="text" style="height: 150px" maxlength="500" class="textarea"
                              id="elseCause"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<%@ include file="/WEB-INF/pages/footer.jsp"%>
<script type="text/javascript">
    let formSelects = layui.formSelects;

    layer.ready(function () {
        let $ = layui.$;
        layer.open({
            title: '不满意原因',
            type: 1,
            content: $("#dissatisfiedCauseForm"),
            btn: ['确认'],
            area: ['340px', '350px'],
            move: false,
            closeBtn: 0,
            resize: false,
            btn1: function (index) {
                let cause = formSelects.value('dissatisfiedCause', 'nameStr');
                let elseCause = $("#elseCause").val();
                if (!cause) {
                    return layer.msg("请选择不满意原因", {time: 1000});
                }
                if (elseCause !== '') {
                    cause += "-" + elseCause;
                }
                layer.close(index);
                let id = "${id}";
                window.location.href = basePath + encodeURI('/publicApi/dissatisfiedCause?id=' + id + '&cause=' + cause);
            }
        });
    })