基于x0popup.js警告消息框和确认框特效



230 916 306



特效描述:基于x0popup.js 警告消息框 确认框特效,基于x0popup.js警告消息框和确认框特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/x0popup.min.css">
<link rel="stylesheet" href="css/rainbow.monokai.css">

2. 引入JS

<script src="js/x0popup.min.js"></script>
<script src="js/rainbow.min.js"></script>
<script src="js/rainbow.linenumbers.min.js"></script>

3. HTML代码

<div class="zzsc-container">
	<div class="content-wrapper">
	<div class="content">
		<div class="block">
			<div class="title">Alert</div>
			<div class="block-code">
				<pre><code data-language="javascript" id="code-1">x0p('Message', 'Hello world!');</code></pre>
			</div><div class="block-detail">
				<p>The most simple one.</p>
				<a class="button bg-color-3" href="javascript:exec(1);">弹出对话框</a>
			</div>
		</div>
		<div class="block">
			<div class="title">Confirm</div>
			<div class="block-code">
				<pre><code data-language="javascript" id="code-2">x0p('Confirmation', 'Are you sure?', 'warning');</code></pre>
			</div><div class="block-detail">
				<p>A confirmation popup with a default icon.</p>
				<a class="button bg-color-2" href="javascript:exec(2);">弹出对话框</a>
			</div>
		</div>
		<div class="block">
			<div class="title">Prompt</div>
			<div class="block-detail-full">
				<p>An input popup with a callback function.&nbsp;&nbsp;&nbsp;&nbsp;<a class="button bg-color-5" href="javascript:exec(3);">弹出对话框</a></p>
			</div>
			<div class="block-code-full">
				<pre><code data-language="javascript" id="code-3">x0p('Enter Your Name', null, 'input',
function(button, text) {
	if(button == 'info') {
		x0p('Congratulations', 
			'Your name is ' + text + '!', 
			'ok', false);
	}
	if(button == 'cancel') {
		x0p('Canceled', 
			'You canceled input.',
			'error', false);
	}
});</code></pre>
			</div>
		</div>
	</div>
</div>
<div class="content-wrapper">
	<div class="content">
		<div class="block"><div class="intro color-3">Want more? Here we go!</div></div>
		<div class="block">
			<div class="title">Custom Popup</div>
			<div class="block-detail-full">
				<p>Another way to call x0popup.&nbsp;&nbsp;&nbsp;&nbsp;<a class="button bg-color-1" href="javascript:exec(5);">弹出对话框</a></p>
			</div>
			<div class="block-code-full">
				<pre><code data-language="javascript" id="code-5">x0p({
title: 'Custom Popup',
text: 'What is your choice?',
animationType: 'slideUp',
icon: 'custom',
iconURL: 'image/thinking.svg',
buttons: [
	{
		type: 'error',
		text: 'First'
	},
	{
		type: 'info',
		text: 'Second'
	}
]
}, function(button) {
x0p({
	title: 'Your choice', 
	text: 'You clicked ' + button + ' button!',
	overlayAnimation: false
});
});</code></pre>
			</div>
		</div>
		<div class="block">
			<div class="title">Auto Close</div>
			<div class="block-detail-full">
				<p>Auto close the popup after some time.&nbsp;&nbsp;&nbsp;&nbsp;<a class="button bg-color-3" href="javascript:exec(6);">弹出对话框</a></p>
			</div>
			<div class="block-code-full">
				<pre><code data-language="javascript" id="code-6">x0p({
title: 'Auto Close',
text: 'This popup will auto close in 3 seconds.',
animationType: 'slideDown',
icon: 'info',
buttons: [],
autoClose: 3000
});</code></pre>
			</div>
		</div>
		<div class="block">
			<div class="title">Async Operation</div>
			<div class="block-detail-full">
				<p>Show a loading animation while executing.&nbsp;&nbsp;&nbsp;&nbsp;<a class="button bg-color-5" href="javascript:exec(7);">弹出对话框</a></p>
			</div>
			<div class="block-code-full">
				<pre><code data-language="javascript" id="code-7">x0p({
title: 'Async Operation',
text: 'Try to do some operation.',
icon: 'info',
animationType: 'fadeIn',
buttons: [
	{
		type: 'cancel'
	},
	{
		type: 'info',
		text: 'Do It!',
		showLoading: true
	}
]
}, function(button) {
if(button == 'info') {
	// Simulate Delay
	setTimeout(function() {
		x0p('Done', null, 'ok', false);
	}, 1500);
}
});</code></pre>
			</div>
		</div>
		<div class="block">
			<div class="title">Advanced Input</div>
			<div class="block-detail-full">
				<p>Placeholder, validator, etc.&nbsp;&nbsp;&nbsp;&nbsp;<a class="button bg-color-2" href="javascript:exec(8);">弹出对话框</a></p>
			</div>
			<div class="block-code-full">
				<pre><code data-language="javascript" id="code-8">x0p({
title: 'Number Check',
type: 'warning',
inputType: 'text',
inputPlaceholder: 'Number Only',
inputColor: '#F29F3F',
inputValidator: function(button, value) {
	if(value == '' || isNaN(value))
		return 'Not a number!';
	return null;
}
}, function(button, text) {
if(button == 'warning') {
	x0p('Congratulations', 
		'Your number is ' + text + '!', 
		'ok', false);
}
});</code></pre>
			</div>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
	function exec(number) {
		var code = document.getElementById('code-' + number).innerText;
		eval(code);
	}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到