layui动态改变弹出框的高度

项目场景:

弹出框页面中根据下拉选项的不同,动态的改变页面的高度。


详细描述:

如下图所示,当页面中的【通知内容类型】选择【相同内容通知】时,弹出框页面中就会多出一个【推送内容】项,这个时候页面的高度就需要改变。


解决方案:

解决的方法不多说了直接上代码

html代码
<div class="layui-form-item updateType">
	<label class="layui-form-label required">通知内容类型:</label>
	<div class="layui-input-inline">
		<select name="contentType" lay-filter="contentType" lay-verify="contentType">
			<option value="1">相同内容通知</option>
			<option value="2">不同内容通知</option>
		</select>
	</div>
</div>
<div class="layui-form-item layui-form-text contentShow" style="display: none">
	<label class="layui-form-label">推送内容:</label>
	<div class="layui-input-inline b-textarea">
		<textarea class="layui-textarea" lay-verify="sendContent" name="sendContent"></textarea>
	</div>
</div>

js代码
layui.use(['element', 'form', 'layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
 
        form.on('select(contentType)', function (data) {
            if (data.value === '2') {
                $.fn.changeFrameHeight('400px');
                $(".contentShow").hide();
            } else {
                $.fn.changeFrameHeight('600px');
                $(".contentShow").show();
            }
        }); 

		var layerIndex = parent.layer.getFrameIndex(window.name);
		$.fn.changeFrameHeight = function (height) {
			parent.layer.style(layerIndex, {
				height: height
			});
		}
        
	});

猜你喜欢

转载自blog.csdn.net/qq_29775797/article/details/110291080