以下是 jquery confirm确认对话框js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自定义confirm确认对话框</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<div class="item">
<a href="#/?p=1274">
<img src="img/1274.jpg" title="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" alt="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
<div class="item">
<a href="#/?p=1266">
<img src="img/1266.jpg" title="Making an Apple-style Splash Screen" alt="Making an Apple-style Splash Screen" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
<div class="item">
<a href="#/?p=1260">
<img src="img/1260.jpg" title="jQuery's Data Method – How and Why to Use It" alt="jQuery's Data Method – How and Why to Use It" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
<div class="item">
<a href="#/?p=1248">
<img src="img/1248.jpg" title="Making Better Select Elements with jQuery and CSS3" alt="Making Better Select Elements with jQuery and CSS3" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
<div class="item">
<a href="#/?p=1240">
<img src="img/1240.jpg" title="Creating a Stylish Coming Soon Page with jQuery" alt="Creating a Stylish Coming Soon Page with jQuery" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
<div class="item">
<a href="#/?p=1209">
<img src="img/1209.jpg" title="Making an AJAX Web Chat" alt="Making an AJAX Web Chat" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
<div class="item">
<a href="#/?p=1185">
<img src="img/1185.jpg" title="Quick Feedback Form w/ PHP and jQuery" alt="Quick Feedback Form w/ PHP and jQuery" width="620" height="340" />
</a>
<div class="delete"></div>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS代码(script.js):
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
$.confirm({
'title':'Delete Confirmation','message':'You are about to delete this item. <br />It cannot be restored at a later time! Continue?','buttons':{
'Yes':{
'class':'blue','action':function(){
elem.slideUp();
}
}
,'No':{
'class':'gray','action':function(){
}
// Nothing to do in this case. You can as well omit the action property.}
}
}
);
}
);
}
);
CSS代码(styles.css):
*{margin:0;padding:0;}
html{background:url('../img/bg_tile.jpg') repeat #dbdbdb;}
body{color:#FCFCFC;background:url('../img/bg_vertical') repeat-x;font:15px Calibri,Arial,sans-serif;border:1px solid transparent;}
#page{width:660px;margin:140px auto 60px;}
.item{background:url("../img/shadow_wide.png") no-repeat center bottom;padding-bottom:6px;display:inline-block;margin-bottom:30px;position:relative;}
.item .delete{background:url('../img/delete_icon.png') no-repeat;width:37px;height:38px;position:absolute;cursor:pointer;top:10px;right:-80px}
.item a{background-color:#FAFAFA;border:none;display:block;padding:10px;text-decoration:none;}
.item:first-child .delete:before{background:url('../img/tooltip.png') no-repeat;content:'.';text-indent:-9999px;overflow:hidden;width:145px;height:90px;position:absolute;right:-110px;top:-95px;}
.item a img{display:block;border:none;}
/* General styles */
#footer{background-color:#212121;position:fixed;width:100%;height:70px;bottom:0;left:0;}
#footer .tri{border-color:transparent transparent #212121;border-style:solid;border-width:20px 17px;height:0;left:50%;margin:-40px 0 0 -400px;position:absolute;top:0;width:0;}
#footer h1{font-size:20px;font-weight:normal;left:50%;margin-left:-400px;padding:25px 0;position:absolute;width:400px;}
#footer a.tzine,a.tzine:visited{background:url("../img/tzine.png") no-repeat right top;border:none;text-decoration:none;color:#FCFCFC;font-size:12px;height:70px;left:50%;line-height:31px;margin:23px 0 0 110px;position:absolute;top:0;width:290px;}
a,a:visited{text-decoration:underline;outline:none;color:#97CAE6;}
a:hover{text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
