layui弹出层layer点击关闭还会显示在html中

我的弹出层是这样定义的:

  它的属性为display:none

复制代码
<div id="divlayer" style="display:none">
    <div class="layui-panel" style="padding: 15px">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>日常生活活动评估表</legend>
        </fieldset>
        <div class="layui-form" lay-filter="day_evaluate" id="day_evaluate">
            <div style="display: none">
                <div class="layui-form-item">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="evaNo">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">进食</label>
                <div class="layui-input-block">
                    <input type="radio" name="eat" value="10" title= "10 分,可独立进食">
                    <input type="radio" name="eat" value="5" title="5 分, 需部分帮助">
                    <input type="radio" name="eat" value="0" title="0 分,完全依赖他人">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">洗澡</label>
                <div class="layui-input-block">
                    <input type="radio" name="bathe" value="5" title= "5 分,独立完成洗澡过程">
                    <input type="radio" name="bathe" value="0" title="0 分, 需他人帮助">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">修饰</label>
                <div class="layui-input-block">
                    <input type="radio" name="embellish" value="5" title= "5 分,独立完成">
                    <input type="radio" name="embellish" value="0" title="0 分, 需他人帮助">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">穿衣</label>
                <div class="layui-input-block">
                    <input type="radio" name="dress" value="10" title= "10 分,可独立完成">
                    <input type="radio" name="dress" value="5" title="5 分, 需部分帮助">
                    <input type="radio" name="dress" value="0" title="0 分,完全依赖他人">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">大便失控</label>
                <div class="layui-input-block">
                    <input type="radio" name="defecate" value="10" title= "10 分,可控制大便">
                    <input type="radio" name="defecate" value="5" title="5 分, 偶尔失控(每周<1 次),或需要他人提示">
                    <input type="radio" name="defecate" value="0" title="0 分,完全失控">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">小便失控</label>
                <div class="layui-input-block">
                    <input type="radio" name="urinate" value="10" title= "10 分,可控制小便">
                    <input type="radio" name="urinate" value="5" title="5 分, 偶尔失控(每周<1 次),或需要他人提示">
                    <input type="radio" name="urinate" value="0" title="0 分,完全失控,或留置导尿管">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">如厕</label>
                <div class="layui-input-block">
                    <input type="radio" name="goToilet" value="10" title= "10 分,可独立完成">
                    <input type="radio" name="goToilet" value="5" title="5 分, 需部分帮助(需他人搀扶去厕所、需他人帮忙冲水或整理衣裤等)">
                    <input type="radio" name="goToilet" value="0" title="0 分, 需极大帮助或完全依赖他人">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">床椅转移</label>
                <div class="layui-input-block">
                    <input type="radio" name="moveChair" value="10" title= "15 分,可独立完成">
                    <input type="radio" name="moveChair" value="5" title="10 分,需部分帮助(需他人搀扶或使用拐杖)">
                    <input type="radio" name="moveChair" value="0" title="5 分, 需极大帮助(较大程度上依赖他人搀扶和帮助)">
                    <input type="radio" name="moveChair" value="0" title="0 分, 完全依赖他人">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">平地行走</label>
                <div class="layui-input-block">
                    <input type="radio"  name="walk" value="10" title= "15 分,可独立在平地上行走 45m">
                    <input type="radio"  name="walk" value="5" title="10 分,需部分帮助(因肢体残疾、平衡能力差、过度衰弱、视力等问题,在一定程度上需他人地搀扶或使用拐杖、助行器等辅助用具)">
                    <input type="radio" name="walk" value="0" title="5 分, 需极大帮助(因肢体残疾、平衡能力差、过度衰弱、视力等问题,在较大程度上依赖他人搀扶,或坐在轮椅上自行移动)">
                    <input type="radio" name="walk" value="0" title="0 分, 完全依赖他人">
                </div>
            </div>
            <button class="layui-btn" id="sum">汇总</button>
            <div class="layui-form-item">
                <label class="layui-form-label">总分</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="total" name="total" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="day_evaluate">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>
复制代码

layui的js中打开显示的代码:

  

 layer.open({
                    title:'老年人日常生活评估',
                    type: 1,
                    content: $('#divlayer'),
                
                })

效果就是这样的了,就是点击关闭弹出层的❌,它没有完全关闭。

 

 在js中做出如下修改就是添加一段代码 即可。

end: function (){
$('#divlayer').hide();
}
layer.open({
title:'老年人日常生活评估',
type: 1,
content: $('#divlayer'),
end: function (){
$('#divlayer').hide();
}
})

 效果就变正常了:

 

posted @   几人著眼到青衫  阅读(627)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示