基于x0popup.js警告消息框和確認框特效



182 725 242



特效描述:基于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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 提示框/彈出層 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子