Mui - 仿Android Dialog

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/ContainsK/article/details/77860302

效果圖：

 CSS code：

.k-pop-dialog {
	width: 9.5em;
	height: 9em;
	margin: 0 auto;
	border-radius: 0;
	z-index: 9999;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
}

.k-center {
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.k-pop-dialog-title {
	position: relative;
	top: 10px;
	width: 100px;
	font-size: 15px;
}

Js code：

function buildDialog() {
	var popDialog;
	var popDialogMask;
	var msgElment;
	var isCancel = false;
	var title = "正在加載,請稍後..";
	var htmx = "<div class=\"mui-popover k-pop-dialog k-center\"><div align=\"center\" class=\"mui-loading k-center\" style=\"width: 100%;\"><span class=\"mui-spinner\" style=\"width: 3em; height: 3em;\"></span><span class=\"k-pop-dialog-title\">" + title + "</span></div></div>";
	document.body.innerHTML += htmx;
	//	console.log(document.body.innerHTML);
	popDialog = document.getElementsByClassName("k-pop-dialog")[0];
	msgElment = document.getElementsByClassName("k-pop-dialog-title")[0];
	popDialogMask = mui.createMask(function() {
		if(!popDialog.classList.contains('mui-active'))
			return true;
		if(isCancel) {
			popDialog.classList.remove('mui-active');
			document.body.style.overflow = 'auto';
		}
		return isCancel;
	});

	return {
		show: function() {

			popDialog.classList.add('mui-active');
			document.body.style.overflow = 'hidden';
			popDialogMask.show(); //顯示遮罩
		},
		hide: function() {
			popDialog.classList.remove('mui-active');
			document.body.style.overflow = 'auto';
			popDialogMask.close();
		},
		setTitle: function(msg) {
			msgElment.innerText = msg;
		},
		setCancel: function(cancel) {
			isCancel = cancel;
		}
	};
}

使用：

	<script>
		mui.init();
		var dialog = buildDialog();
		//設置標題
		dialog.setTitle("加載中，不要急喲~");
		//設置點擊外部是否關閉
		dialog.setCancel(false);
		//顯示
		dialog.show();
		//隱藏
		dialog.hide();
	</script>