多层modal打开冲突问题

文章描述了一个在处理多个modal弹窗时遇到的ID冲突问题,以及采用动态添加当前modal框ID的解决方案。通过生成唯一的时间戳作为ID,确保每个modal有独特的标识,从而避免冲突。在modal关闭时,会清除并移除对应的DOM元素。
摘要由CSDN通过智能技术生成

问题

多个modal打开出现Id冲突情况,导致modal无法关闭

解决方案

动态添加当前modal框id

//通用打开模态窗口
has.common.openModal = function(options){
	var defaults = {
		"url": "",
		"modalDiv":true//是否创建最外层class="modal fade"的div,因为有的打开的页面需要,有的不需要
	};
	var settings = $.extend(defaults, options);
	var t = new Date().getTime();
	var id = "tmpdiv_"+t;
	var url = settings.url;
	if (url.indexOf("?")>=0) {
		url = url+"&divid="+id;
	}else{
		url = url+"?divid="+id;
	}
	var div = document.createElement("div");
	div.id = id;
	if(settings.modalDiv){
		div.setAttribute("class", "modal fade");
		div.setAttribute("role", "dialog");
	}
	$("body").append(div);
	$("#"+id).load(url,function(response,status,xhr){
		$('#'+id).on('hidden.bs.modal',function(e){
			//$("#"+id).modal("dispose");
			$('#'+id).empty();
			$('#'+id).remove();
		    $("body").find(".modal").each(function(e){
	    	    var bl = $(this).css("display");
	    	    if(bl=="block"){
			        $("body").toggleClass("modal-open",true);
			        return false;
		        }
	        });
		}).modal({show:true,backdrop:false,keyboard:false});
	});
}

在编程,`useModal`可能并不是一个通用的函数或方法名,因此没有一个标准的定义。但是,如果我们假设你正在谈论一个用于显示模态对话框(modal dialog)的自定义函数或组件,那么这个函数可能是用来控制模态对话框如何显示和行为的。 通常,模态对话框可以设计为全屏显示或部分覆盖页面,具体取决于设计需求或用户交互。在不同的前端框架或库,可能会有不同的方法来实现全屏模态对话框。例如,在React,你可以通过设置样式使模态对话框覆盖整个视窗。在Vue.js,可能涉及到使用v-show或v-if指令来控制模态对话框的显示。 如果你的`useModal`是自定义的逻辑来控制模态框的显示,那么你可能需要添加一个选项或参数来控制模态框是否全屏显示。这通常涉及到CSS样式的应用,比如设置模态框的宽度和高度属性为100%,或者使用flexbox布局来调整模态框的位置和大小,使其占据整个屏幕。 以下是一个假设的例子,假设`useModal`是一个函数,可以控制模态框是否全屏: ```javascript function useModal(isFullScreen) { // ...其他逻辑... const modalStyle = isFullScreen ? { width: '100vw', height: '100vh' } : {}; return { // 返回模态框组件和样式 ModalComponent: <MyModal />, style: modalStyle, }; } ``` 在这个例子,`useModal`函数接受一个`isFullScreen`参数,用来决定模态框是否应该全屏显示。如果`isFullScreen`为`true`,则模态框样式设置为全屏(100vw宽度和100vh高度),否则使用默认样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值