mxgraph中封装带表单的模态对话框

			//动态生成bootstrap模态弹框
				function ff() {
					function commitResult() { // 要出发的函数
						alert("提交成功");
						this.parentNode.parentNode.parentNode.style.display = "none"; //这里时为了获得 modal_bc;
					}
                    //aa里面就是你的弹框的布局,可以自定义
					let aa = '<div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('screenName') +'</span><input type="text" id="imgName" required></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('note') + '</span><input type="text" id="moreMessage" required></div><br/><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('zoom') +'</span><input type="checkbox"></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('popUp') + '</span><input type="checkbox"></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('screenWidth') + '</span><input type="text"></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('screenHeight') + '</span><input type="text"></div>';
					create_modal(false, aa, commitResult);
				}
				/*
				 * params:
				 *       alert_or_confirm  type:true or false
				 *       modal_content     type:String
				 *       confirm_trigger_function  type:function
				 *       注意:confirm_tirrger_function 里最后异步:必须关闭模态框
				 *       因加上这段代码:
				 *          this.parentNode.parentNode.parentNode.style.display = "none"; //这里时为了获得 modal_bc;
				 * 
				 * */
				function create_modal(alert_or_confirm, modal_contents, confirm_trigger_function) {
					let modal_bg = document.createElement("div");
					let modal_container = document.createElement("div");

					let modal_title = document.createElement("div");
					let modal_content = document.createElement("div");
					let modal_footer = document.createElement("div");
					//设置id
					modal_bg.setAttribute("id", "modal_bg");
					modal_container.setAttribute("id", "modal_container");
					modal_title.setAttribute("id", "modal_title");
					modal_content.setAttribute("id", "modal_content");
					modal_footer.setAttribute("id", "modal_footer");
					//设置样式
					modal_bg.style.cssText = "display:block;" +
						"background-color: rgba(0,0,0,0.4);" +
						"position:fixed;" +
						"top:0;" +
						"bottom:0;" +
						"right:0;" +
						"left:0;";
					modal_container.style.cssText = "background-color:white;" +
						"width:300px;" +
						"height:300px;" +
						"margin:10% auto;";
					modal_title.style.cssText = "color:white;" +
						"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
						"width:100%;" +
						"height:50px;" +
						"line-height:50px;";
					modal_content.style.cssText = "color:black;" +
						"margin-top:10px;"+
						"padding-left:20px;" +
						"vertical-align:middle;" +
						"width:100%;" +
						"height:190px;" +
						"border-bottom:2px solid grey";
					modal_footer.style.cssText = "padding:14px 15px 15px;" +
						"color:white;" +
						"width:100%;" +
						"height:60px;";

					modal_container.appendChild(modal_title);
					modal_container.appendChild(modal_content);
					modal_container.appendChild(modal_footer)
					modal_bg.appendChild(modal_container);
					//将整个模态框添加到body中
					document.body.appendChild(modal_bg);

					//给模态框添加相应的内容
					// modal_title.innerHTML="This is a modal title";
					modal_content.innerHTML = modal_contents;
					// modal_footer.innerHTML = "This is a modal footer";

					// 制作关闭按钮
					let close_button = document.createElement("span");
					close_button.innerHTML = "&times;";
					close_button.setAttribute("id", "modal_close_button")
					close_button.style.cssText = " margin-right:8px;" +
						"line-height:50px;" +
						"color: #aaa;" +
						"float: right;" +
						"font-size: 28px;" +
						"font-weight: bold;";
					close_button.onmouseover = function(event) {
						close_button.style.color = "black";
						event = event || window.event;
						event.stopPropagation();
					}
					document.onmouseover = function() {
						document.getElementById("modal_close_button").style.color = "#aaa";
					}
					close_button.addEventListener("click", function() {
						modal_bg.style.display = "none"
					})
					modal_title.appendChild(close_button);

					//制作确定按钮和取消按钮
					let confirm_button = document.createElement("div");
					let cancel_button = document.createElement("div");
					confirm_button.style.cssText = "border-radius:5px;" +
						"color:white;" +
						"text-align:center;" +
						"line-height:20px;" +
						"font-size:17px;" +
						"float:right;" +
						"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
						"padding:5px;" +
						"margin-right:30px;";
					cancel_button.style.cssText = "border-radius:5px;" +
						"color:white;" +
						"text-align:center;" +
						"line-height:20px;" +
						"font-size:17px;" +
						"float:right;" +
						"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
						"padding:5px;" +
						"margin-right:30px;";
					confirm_button.innerHTML = mxResources.get('apply'); //确认
					cancel_button.innerHTML = mxResources.get('cancel') //取消
					if (alert_or_confirm) {
						modal_footer.appendChild(confirm_button);
					} else {
						modal_footer.appendChild(confirm_button);
						modal_footer.appendChild(cancel_button);
					}

					//添加相应的事件
					cancel_button.addEventListener("click", function() {
						modal_bg.style.display = "none"
					});
					// confirm_button.addEventListener("click", confirm_trigger_function);
					confirm_button.addEventListener("click", function(){
						modal_bg.style.display = "none"
						myAlert(mxResources.get('updateSuccess'), onclick, false);
					});

				}

点击按钮调用的时候:

//changeImg就是我要获取的按钮
changeImg.each(function() {
					$(this).on('click', changeImg, ff);
				})

发布了128 篇原创文章 · 获赞 250 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/XU441520/article/details/103591533