Mui - 仿Android Dialog

最新推荐文章于 2024-08-09 08:27:26 发布

ContainsK

最新推荐文章于 2024-08-09 08:27:26 发布

阅读量998

点赞数 1

CC 4.0 BY-SA版权

分类专栏： MUI 文章标签： MUI Android Dialog

本文链接：https://blog.youkuaiyun.com/ContainsK/article/details/77860302

MUI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的加载对话框实现方案，使用HTML、CSS和JavaScript创建并控制对话框的显示与隐藏，适用于网页应用中需要展示加载提示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

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>