多层modal打开冲突问题

Narrat

于 2023-02-20 10:40:38 发布

阅读量269

点赞数

分类专栏： boootstrap 文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/finedust/article/details/129119786

版权

boootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章描述了一个在处理多个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});
	});
}