jQuery模态对话框插件



119 475 159



特效描述:jQuery 模态对话框插件,jQuery模态对话框插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/default/zebra_dialog.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="libraries/highlight/public/css/ir_black.css" type="text/css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="libraries/highlight/public/javascript/highlight.js"></script>
<script type="text/javascript" src="js/zebra_dialog.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<header class="htmleaf-header">
	<div class="htmleaf-demo center">
	  <a href="index.html" class="current">默认对话框</a>
	  <a href="index2.html">扁平风格</a>
	</div>
</header>
<section class="htmleaf-container">
	<div class="main-wrapper">
		<h3>Zebra_Dialog Demo:默认对话框</h3>
		<strong>1.</strong> 默认不带参数配置的对话框。点击<a href="javascript:void(0)" id="example1">这里</a> 查看效果。
		<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery');</code></pre>
		<p>&nbsp;</p>
		<strong>2.</strong> 以下是5种类型的对话框: <a href="javascript:void(0)" id="example2_1">error</a>, <a href="javascript:void(0)" id="example2_2">warning</a>, <a href="javascript:void(0)" id="example2_3">question</a>, <a href="javascript:void(0)" id="example2_4">information</a> and <a href="javascript:void(0)" id="example2_5">confirmation</a>.
<pre><code class="javascript">// this example is for the "error" box only
// for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
// and the text for the "title" property also changes
$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'type':     'error',
'title':    'Error'
});</code></pre>
		<p>&nbsp;</p>
		<strong>3.</strong> 自定义按钮和回调函数。点击<a href="javascript:void(0)" id="example3">这里</a>查看效果。<br><br>
		<em>注意:onClose事件在对话框关闭后才被执行。你可以参考下一个例子如何在关闭对话框之前来执行函数。</em>
<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'type':     'question',
'title':    'Custom buttons',
'buttons':  ['Yes', 'No', 'Help'],
'onClose':  function(caption) {
	alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
}
});</code></pre>
		<p>&nbsp;</p>
		<strong>3.1</strong>自定义带回调函数的按钮。点击 <a href="javascript:void(0)" id="example31">这里</a>查看效果。<br><br>
		<em>注意:附加到按钮上的函数会在对话框关闭前触发(按钮一点就就触发)。</em>
<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'type':     'question',
'title':    'Custom buttons',
'buttons':  [
				{caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
				{caption: 'No', callback: function() { alert('"No" was clicked')}},
				{caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
			]
});</code></pre>
		<p>&nbsp;</p>
		<strong>4.</strong> 将对话框放置在屏幕的右上角位置。点击<a href="javascript:void(0)" id="example4">这里</a>查看效果。
<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'title':    'Custom positioning',
'position': ['right - 20', 'top + 20']
});</code></pre>
		<p>&nbsp;</p>
		<strong>5.</strong> 使用消息提示模式-不带按钮,2秒后自动消失。
		<br><br>
		<em>注意:这种模式需要使用new关键字来实例化对象,最后打开的对话框将被关闭。</em><br>
		点击<a href="javascript:void(0)" id="example5">这里</a>查看效果。
<pre><code class="javascript">new $.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'buttons':  false,
'modal': false,
'position': ['right - 20', 'top + 20'],
'auto_close': 2000
});</code></pre>
		<p>&nbsp;</p>
		<strong>6.</strong> 通过AJAX加载外部内容。
		点击<a href="javascript:void(0)" id="example6">这里</a>查看效果。
<pre><code class="javascript">new $.Zebra_Dialog('&lt;strong&gt;Some dummy content:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;', {
'source':  {'ajax': 'ajax.html'},
width: 600,
'title': 'External content loaded via AJAX'
});</code></pre>
		<p>&nbsp;</p>
		<strong>6.1</strong> 在iFrame中加载外部内容。
		点击 <a href="javascript:void(0)" id="example61">这里</a> 查看效果。
<pre><code class="javascript">new $.Zebra_Dialog('&lt;strong&gt;Content loaded via AJAX:&lt;/strong&gt;', {
source: {'iframe': {
	'src':  'http://en.m.wikipedia.org/wiki/Dialog_box',
	'height': 500
}},
width: 800,
title:  'External content loaded in an iFrame'
});</code></pre>
		<p>&nbsp;</p>
		<strong>7.</strong> 自定义外观-标题为蓝黑色背景,以及一个自定义图标。
		<br><br>CSS样式为:
<pre><code class="css">/* Notice how we're targting the dialog box's title bar through the custom class */
.myclass .ZebraDialog_Title { background: #DEDEDE; border-bottom: 1px solid #222 }
.myclass .ZebraDialog_Body { background-image: url('coffee_48.png') }</code></pre>
		点击 <a href="javascript:void(0)" id="example7">这里</a> 查看效果。<br>
<pre><code class="javascript">new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
'custom_class':  'myclass',
'title': 'Customizing the appearance'
});</code></pre>
		<p>&nbsp;</p>
	</div>
<div id="boxcontent" style="display: none">
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
</div>
</section>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>



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


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片广告 文字提示框 对联广告 提示框/弹出层 layer 叠加浮动层 lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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