Custom popup box based on javascript class

- Effect example picture! [Insert picture description here] (https://img-blog.csdnimg.cn/b82907180c7e45e9ab09860fa6c246bf.png#pic_center)
- code example
Effect example picture

code example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			#showDialog {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0px;
				right: 0px;
				left: 0px;
				bottom: 0px;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 9999;
			}

			.showDialog-wrap {
				width: 94%;
				max-width: 500px;
				border-radius: 8px;
				background-color: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				flex-direction: column;
			}

			.showDialog-title {
				width: 94%;
				margin: 24px auto 0px auto;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				color: #333;
				font-weight: bold;
			}

			.showDialog-content {
				width: 94%;
				margin: 24px auto;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				color: #333;
			}

			.showDialog-btnWrap {
				max-width: 300px;
				width: 94%;
				margin: 0px auto 24px auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.showDialog-btn {
				min-width: 100px;
				height: 40px;
				line-height: 40px;
				border-radius: 20px;
				font-size: 16px;
				padding-left: 12px;
				padding-right: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}

			.cancel-btn {
				border: 1px solid #ff0000;
				color: #ff0000;
			}

			.confirm-btn {
				border: 1px solid #00a2ef;
				background-color: #00a2ef;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<button id="dialog">按钮</button>
	</body>
	<script type="text/javascript">
		class showDialog {
			static DEFAULT_OPTIONS = {
				title: '标题',
				content: '内容',
				cancelText: "取消",
				confirmText: '确认',
				success: (res) => {
					console.log("[返回值01]", res)
				}
			}
			constructor(options) {
				this.$options = Object.assign({}, showDialog.DEFAULT_OPTIONS, options);
				this.create();
			}


			/**
			 * 创建弹出框
			 * **/
			create() {
				if (document.querySelector("#showDialog")) {
					document.querySelector("#showDialog").remove();
				}
				const divs = document.createElement("div");
				divs.classList.add("showDialog");
				divs.setAttribute("id", 'showDialog');

				const showDialogHtml = `
					<div class="showDialog-wrap">
					     <div class="showDialog-title">${this.$options.title}</div>
						 <div class="showDialog-content">${this.$options.content}</div>
						 <div class="showDialog-btnWrap">
						      <div class="showDialog-btn cancel-btn" id="cancelBtn">${this.$options.cancelText}</div>
							  <div class="showDialog-btn confirm-btn" id="confirmBtn">${this.$options.confirmText}</div>
						 </div>
					</div>
				`;

				divs.innerHTML = showDialogHtml.trim();
				document.body.appendChild(divs);
				this.bindEvents();
			}

			/**
			 * 绑定事件
			 * **/
			bindEvents() {
				/**
				 * 点击-触发取消按钮
				 * **/
				document.querySelector("#cancelBtn").addEventListener("click", () => {
					this.$options.success(false);
					document.querySelector("#showDialog").remove();
				})
				/**
				 * 点击-触发确认按钮
				 * **/
				document.querySelector("#confirmBtn").addEventListener("click", () => {
					this.$options.success(true);
					document.querySelector("#showDialog").remove();
				})
			}

		}

		document.querySelector("#dialog").addEventListener("click", () => {
			new showDialog({
				title: '标题',
				content: '内容区域内容区域内容区域内容区域',
				cancelText: "取消",
				confirmText: '确认',
				success: (res) => {
					if (res) {
						console.log("[确认]", res)
					} else {
						console.log("[取消]", res)
					}
				}
			})
		})
	</script>
</html>
Custom popup box based on javascript class

Custom popup box based on javascript class

Effect example picture

code example

Guess you like
