JS确认框和对话框插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS确认框和对话框插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS确认框和对话框插件下载</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
	#materialModal{
		font-family:roboto;
		color:#222;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		display:table;
		z-index:1000;
	}
	#materialModalCentered{
		display:table-cell;
		vertical-align:middle;
	}
	#materialModalContent{
		padding:10px;
		position:relative;
		background:white;
		width:400px;
		min-height:200px;
		margin:auto;
		box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);
		box-sizing:border-box;
	}
	#materialModalTitle{
		margin:10px;
		font-weight:bold;
		font-size:1.2em;
	}
	#materialModalText{
		margin:10px;
		margin-bottom:40px;
	}
	#materialModalButtons{
		width:calc(100% - 20px);
		position:absolute;
		bottom:0px;
	}
	.materialModalButton{
		margin:10px;
		font-weight:bold;
		cursor:pointer;
		text-align:center;
		float:right;
		text-transform:uppercase;
		padding:10px;
	}
	#materialModal.hide{
		display: none;
		opacity:0;
		transition:opacity 0.2s ease-out;
		pointer-events:none;
	}
	#materialModal.hide #materialModalCentered{
		transform:scale(0);
		transition:transform 0.2s ease-out;
	}
	#materialModal.show{
		opacity:1;
		transition:opacity 0.2s ease-in;
	}
	#materialModal.show #materialModalCentered{
		transform:scale(1);
		transition:transform 0.2s ease-in;
	}
</style>
<script type="text/javascript" src="js/material-modal.js"></script>

</head>
<body>
<div class="zzsc-container">
	<div class="zzsc-content">
		<button onclick="materialConfirm('标题','这里是内容',function(result){console.log(result)})">Show confirm</button>
		<button onclick="materialAlert('标题','这里是内容',function(result){console.log(result)})">Show alert</button>
	</div>
</div>
<div id="materialModal" onclick="closeMaterialAlert(event, false)" class="hide">
	<div id="materialModalCentered">
		<div id="materialModalContent" onclick="event.stopPropagation()">
			<div id="materialModalTitle">
				这里是标题
			</div>
			<div id="materialModalText">
				这里是内容<br/>
			</div>
			<div id="materialModalButtons">
			<div id="materialModalButtonOK" class="materialModalButton" onclick="closeMaterialAlert(event, true)">
				确定
			</div>
			<div id="materialModalButtonCANCEL" class="materialModalButton" onclick="closeMaterialAlert(event, false)">
				取消
			</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(material-modal.js):

materialCallback = null;
	function materialAlert( title,text,callback ){
	document.getElementById('materialModalTitle').innerHTML = title;
	document.getElementById('materialModalText').innerHTML = text;
	document.getElementById('materialModalButtonCANCEL').style.display = 'none';
	document.getElementById('materialModal').className = 'show';
	materialCallback = callback;
}
function materialConfirm( title,text,callback ){
	materialAlert( title,text,callback );
	document.getElementById('materialModalButtonCANCEL').style.display = 'block';
}
function closeMaterialAlert(e,result){
	e.stopPropagation();
	document.getElementById('materialModal').className = 'hide';
	if(typeof materialCallback == 'function') materialCallback(result);
}
window.onload = function(){
	console.log('material-modal.js v1.1')var materialModal = document.createElement('div');
	materialModal.id = 'materialModal';
	materialModal.className = 'hide';
	materialModal.setAttribute('onclick','closeMaterialAlert(event,false);
	');
	var materialModalCentered = document.createElement('div');
	materialModalCentered.id = 'materialModalCentered'var materialModalContent = document.createElement('div');
	materialModalContent.id = 'materialModalContent'materialModalContent.setAttribute('onclick','event.stopPropagation();
	');
	var materialModalTitle = document.createElement('div');
	materialModalTitle.id = 'materialModalTitle'var materialModalText = document.createElement('div');
	materialModalText.id = 'materialModalText'var materialModalButtons = document.createElement('div');
	materialModalButtons.id = 'materialModalButtons'var materialModalButtonOK = document.createElement('div');
	materialModalButtonOK.id = 'materialModalButtonOK'materialModalButtonOK.className = 'materialModalButton'materialModalButtonOK.setAttribute('onclick','closeMaterialAlert(event,true);
	');
	materialModalButtonOK.innerHTML = 'OK'var materialModalButtonCANCEL = document.createElement('div');
	materialModalButtonCANCEL.id = 'materialModalButtonCANCEL'materialModalButtonCANCEL.className = 'materialModalButton'materialModalButtonCANCEL.setAttribute('onclick','closeMaterialAlert(event,false);
	');
	materialModalButtonCANCEL.innerHTML = 'CANCEL'materialModalButtons.appendChild(materialModalButtonOK);
	materialModalButtons.appendChild(materialModalButtonCANCEL);
	materialModalContent.appendChild(materialModalTitle)materialModalContent.appendChild(materialModalText)materialModalContent.appendChild(materialModalButtons)materialModalCentered.appendChild(materialModalContent)materialModal.appendChild(materialModalCentered);
	document.body.appendChild(materialModal)}

CSS代码(material-modal.css):

#materialModal{font-family:roboto;color:#222;position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.5);display:table;z-index:1000;}
#materialModalCentered{display:table-cell;vertical-align:middle;}
#materialModalContent{padding:10px;position:relative;background:white;width:400px;min-height:200px;margin:auto;box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);box-sizing:border-box;}
#materialModalTitle{margin:10px;font-weight:bold;font-size:1.2em;}
#materialModalText{margin:10px;margin-bottom:40px;}
#materialModalButtons{width:calc(100% - 20px);position:absolute;bottom:0px;}
.materialModalButton{margin:10px;font-weight:bold;cursor:pointer;text-align:center;float:right;text-transform:uppercase;padding:10px;}
#materialModal.hide{opacity:0;transition:opacity 0.2s ease-out;pointer-events:none;}
#materialModal.hide #materialModalCentered{transform:scale(0);transition:transform 0.2s ease-out;}
#materialModal.show{opacity:1;transition:opacity 0.2s ease-in;}
#materialModal.show #materialModalCentered{transform:scale(1);transition:transform 0.2s ease-in;}

附件:下载该文件资源,减少时间成本(增值服务)