对话框-Zebra_Dialog特效代码

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

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

以下是对话框-Zebra_Dialog特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
	<title>403 Forbidden</title>
</head>
<body>
    <p>Directory access is forbidden.</p>
</body>
</html>

JS代码(functions.js):

$(document).ready(function(){
	$('#example1').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong>,a small,compact and highly configurable dialog box plugin for jQuery');
}
);
	$('#example2_1').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong> has no dependencies other than <em>jQuery 1.5.2+</em> and works in all major' + ' browsers like<br>- Firefox<br>- Opera<br>- Safari<br>- Chrome<br>- Internet Explorer 6+',{
	'type':'error','title':'Error'}
);
}
);
	$('#example2_2').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong> is meant to replace JavaScript\'s <em>alert</em> and <em>confirmation</em>' + ' dialog boxes. <br><br> Can also be used as a notification widget - when configured to show no buttons and to close' + ' automatically - for updates or errors,without distracting users from their browser experience by displaying obtrusive alerts.',{
	'type':'warning','title':'Warning'}
);
}
);
	$('#example2_3').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong> can generate 5 types of dialog boxes:confirmation,information,' + ' warning,error and question.<br><br>The appearance of the dialog boxes is easily customizable by changing the CSS file ',{
	'type':'question','title':'Question'}
);
}
);
	$('#example2_4').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong> dialog boxes can be positioned anywhere on the screen - not just in the middle!' + '<br><br>By default,dialog boxes can be closed by pressing the ESC key or by clicking anywhere on the overlay.',{
	'type':'information','title':'Information'}
);
}
);
	$('#example2_5').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong> is a small (4KB minified),compact (one JS file,no dependencies other than jQuery 1.5.2+)' + ' and highly configurable dialog box plugin for jQuery meant to replace JavaScript\'s <em>alert</em> and <em>confirmation</em> dialog boxes.',{
	'type':'confirmation','title':'Confirmation'}
);
}
);
	$('#example3').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong>,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');
}
}
);
}
);
	$('#example31').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong>,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')}
}
]}
);
}
);
	$('#example4').bind('click',function(e){
	e.preventDefault();
	$.Zebra_Dialog('<strong>Zebra_Dialog</strong>,a small,compact and highly configurable dialog box plugin for jQuery',{
	'title':'Custom positioning','position':['right - 20','top + 20']}
);
}
);
	$('#example5').bind('click',function(e){
	e.preventDefault();
	new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>,a small,compact and highly configurable dialog box plugin for jQuery',{
	'buttons':false,'modal':false,'position':['right - 20','top + 20'],'auto_close':2000}
);
}
);
	$('#example6').bind('click',function(e){
	e.preventDefault();
	new $.Zebra_Dialog('Buy me a coffee if you like this plugin!',{
	'custom_class':'myclass','title':'Customizing the appearance'}
);
}
);
}
);

CSS代码(reset.css):

/* = FONT STACKS----------------------------------------------------------------------------------------------------------------------*/
body{font-family:Geneva,'Lucida Sans','Lucida Grande','Lucida Sans Unicode',Verdana,sans-serif}
/* "wide" sans serif */
/*body{font-family:Tahoma,Arial,Helvetica,sans-serif}
/* "narrow" sans serif */
/*body{font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif}
/* "wide" serif */
/*body{font-family:'Times New Roman',Times,serif}
/* "narrow" serif */
/* transform the font size so that 1em is 10px so that you can use em's but think in pixels as now 1em is 10px,1.2em is 12px and so on */
html{font-size:62.5%}
body{font-size:1.3em;margin:0;padding:0;outline:0;border:0;text-align:center;/* this is for IE6 so that it will center the main wrapper */
 line-height:1.2;/* unit-less line-height does not inherit a percentage value of its parent element */
 /* but instead is based on a multiplier of the font-size */
}
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,aabbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;}
a,blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,label,li,ol,p,pre,span,table,ul{position:relative}
p,h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
smallsup,sub{font-size:70%}
p small{display:block;line-height:1}
strong,b{font-weight:bold}
em,i{font-style:italic}
/* = CLEARFIX----------------------------------------------------------------------------------------------------------------------*/
.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden;font-size:0}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
/* for IE only */
/* = TABLES----------------------------------------------------------------------------------------------------------------------*/
table{border-collapse:collapse;border-spacing:0;/* tables still need cellspacing="0" */
}
/* = LISTS----------------------------------------------------------------------------------------------------------------------*/
ul,ol{list-style:none}
ul.float li,ol.float li{float:left}
ul.default,ol.default,ol.default ul,ul.default ul,ul.default ol,ol.default ol{padding-left:1.5em}
ul.default,ol.default ul,ul.default ul{list-style-type:square}
ol.default,ul.default ol,ol.default ol{list-style-type:decimal}

CSS代码(style.css):

body{}
/* = MAIN WRAPPER----------------------------------------------------------------------------------------------------------------------*/
.main-wrapper{width:960px;margin:0 auto;text-align:left}
h3{font-size:31px}
h3,p,pre{margin:10px 0}
/* = CUSTOM STYLES FOR THE DIALOG BOX----------------------------------------------------------------------------------------------------------------------*/
.myclass .ZebraDialog_Title{background:#330066}
.myclass .ZebraDialog_Body{background-image:url('coffee_48.png')}
/* = MISCELLANEOUS----------------------------------------------------------------------------------------------------------------------*/
.align-center{text-align:center}
.align-left{text-align:left}
.align-right{text-align:right}
.block{display:block}
.bottom{margin-bottom:0;padding-bottom:0}
.center{text-align:center}
.clear{clear:both}
.first{margin-left:0;padding-left:0}
.hidden{visibility:hidden}
.highlight{background:#ccf}
.inline{display:inline}
.last{margin-right:0;padding-right:0}
.left{float:left}
.none{display:none}
.nowrap{white-space:nowrap}
.right{float:right}
.stretch{width:100%}
.top{margin-top:0;padding-top:0}
.visible{visibility:visible}

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