jQuery zeroModal弹出层加载提示插件


jQuery zeroModal弹出层加载提示插件
jQuery zeroModal弹出层加载提示插件以及zeroModal、弹出层、加载提示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" type="text/css" href="css/zeroModal.css" />

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/zeroModal.js"></script>

3. HTML代码

<h1 style="text-align:center">zeroModal</h1>
<h5 style="text-align:center">jQuery弹出层组件,扁平化风格,支持弹出常用的模态框及操作提示框、等待层等。支持amd或cmd规范,或直接引入。</h5>
<div style="position:absolute;width:200px;left:220px;">
	<ol class="rounded-list">
		<li><a href="javascript:_basic()">basic</a></li>
		<li><a href="javascript:_params()">带标题</a></li>
		<li><a href="javascript:_button()">带按钮</a></li>
		<li><a href="javascript:_setsize()">自定义尺寸(px、pt、%)</a></li>
		<li><a href="javascript:_notoverlay()">不要遮罩</a></li>
		<li><a href="javascript:_setOpacity()">设置遮罩层透明度</a></li>
		<li><a href="javascript:_iframe()">嵌套iframe</a></li>
		<li><a href="javascript:_esc()">支持esc键退出</a></li>
		<li><a href="javascript:_resize()">允许拖放大小</a></li>
		<li><a href="javascript:_max()">允许最大化</a></li>
	</ol>
</div>
<div style="position:absolute;width:200px;left:480px;">
	<ol class="rectangle-list">
		<li><a href="javascript:_loading(1)">等待框1 (loading)</a></li>
		<li><a href="javascript:_loading(2)">等待框2 (loading)</a></li>
		<li><a href="javascript:_loading(3)">等待框3 (loading)</a></li>
		<li><a href="javascript:_loading(4)">等待框4 (loading)</a></li>
		<li><a href="javascript:_loading(5)">等待框5 (loading)</a></li>
		<li><a href="javascript:_loading(6)">等待框6 (loading)</a></li>
		<!--<li><a href="javascript:_progress(1)">progress1</a></li>-->
	</ol>
</div>
<div style="position:absolute;width:200px;left:760px;">
	<ol class="rounded-list">
		<li><a href="javascript:_alert1()">提示框1 (alert)</a></li>
		<li><a href="javascript:_alert2()">提示框2 (alert)</a></li>
		<li> <a href="javascript:_confirm1()">确认框1 (confirm)</a></li>
		<li> <a href="javascript:_confirm2()">确认框2 (confirm)</a></li>
		<li> <a href="javascript:_error()">失败提示框 (error)</a></li>
		<li> <a href="javascript:_success()">成功提示框 (success)</a></li>
	</ol>
</div>
<script type="text/javascript">
	function _basic() {
			zeroModal.show();
		}
		function _params() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal'
			});
		}
		function _button() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				ok: true,
				cancel: true,
				okFn: function() {
					alert('clicked ok and not close');
					return false;
				}
			});
		}
		function _setsize() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				width: '60%',
				height: '40%'
			});
		}
		function _notoverlay() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				width: '60%',
				height: '40%',
				overlay: false
			});
		}
		function _iframe() {
			zeroModal.show({
				title: 'hello world',
				iframe: true,
				url: 'http://www.baidu.com',
				width: '80%',
				height: '80%',
				cancel: true
			});
		}
		function _esc() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				esc: true
			});
		}
		function _resize() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				width: '60%',
				height: '40%',
				resize: true
			});
		}
		function _max() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				width: '60%',
				height: '40%',
				max: true
			});
		}
		function _loading(type) {
			zeroModal.loading(type);
		}
		function _progress() {
			zeroModal.progress();
		}
		function _alert1() {
			zeroModal.alert('请选择数据进行操作!');
		}
		function _alert2() {
			zeroModal.alert({
				content: '操作提示!',
				contentDetail: '请选择数据后再进行操作',
				okFn: function() {
					alert('ok callback');
				}
			});
		}
		function _confirm1() {
			zeroModal.confirm("确定提交审核吗?", function() {
				alert('ok');
				//return false;
			});
		}
		function _confirm2() {
			zeroModal.confirm({
				content: '确定提交审核吗?',
				contentDetail: '提交后将不能进行修改。',
				okFn: function() {
					alert('ok');
				},
				cancelFn: function() {
					alert('cancel');
				}
			});
		}
		function _error() {
			zeroModal.error('请选择数据进行操作!');
		}
		function _success() {
			zeroModal.success('操作成功!');
		}
		function _setOpacity() {
			zeroModal.show({
				title: 'hello world',
				content: 'this is zeroModal',
				width: '60%',
				height: '40%',
				opacity: 0.8
			});
		}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

相关推荐

发表评论

相关文章