jQuery reveal弹出表单js代码

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

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

以下是 jQuery reveal弹出表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery reveal弹出表单</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* reveal-modal */
.reveal-modal-bg{position:fixed;height:100%;width:100%;background-color:#000;z-index:100;display:none;top:0;left:0;}
.reveal-modal{visibility:hidden;top:100px;left:50%;margin-left:-300px;width:420px;background:#eee url(modal-gloss.png) no-repeat -200px -80px;position:absolute;z-index:101;padding:30px 40px 34px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 10px rgba(0,0,0,.4);-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);-box-shadow:0 0 10px rgba(0,0,0,.4);}
.reveal-modal .close-reveal-modal {
font-size:22px;line-height:.5;position:absolute;top:8px;right:11px;color:#aaa;text-shadow:0 -1px 1px rbga(0,0,0,.6);font-weight:bold;cursor:pointer;} 
.reveal-modal h2{font-size:18px;color:#990000;padding:0 0 20px 0;}
.reveal-modal p{padding:0 0 15px 0;}
</style>
<a style="display:block;width:300px;margin:50px auto;text-align:center;font-size:18px;color:#5e5e5e;text-decoration:none;" href="javascript:void(0);" data-reveal-id="myModal">
点击弹出-模拟帐户申请</a>
<div id="myModal" class="reveal-modal">
	<h2>模拟帐户申请</h2>
	<p>用户姓名：<input name="111" type="text" class="input" size="20"></p>
	<p>手机号码：<input name="111" type="text" class="input" size="20"></p>
	<p>身份证号：<input name="111" type="text" class="input" size="35"></p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input name="sub" type="button" value="提交申请" /></p>
	<a class="close-reveal-modal">×</a> </div>
</body>
</html>

JS代码(jquery.reveal.js):

/* * jQuery Reveal Plugin 1.0 * www.ZURB.com * Copyright 2010,ZURB * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php*/
(function($){
	/*--------------------------- Defaults for Reveal----------------------------*/
/*--------------------------- Listener for data-reveal-id attributes----------------------------*/
$('a[data-reveal-id]').live('click',function(e){
	e.preventDefault();
	var modalLocation = $(this).attr('data-reveal-id');
	$('#'+modalLocation).reveal($(this).data());
}
);
	/*--------------------------- Extend and Execute----------------------------*/
 $.fn.reveal = function(options){
	var defaults ={
	animation:'fadeAndPop',//fade,fadeAndPop,none animationspeed:300,//how fast animtions are closeonbackgroundclick:true,//if you click background will modal close? dismissmodalclass:'close-reveal-modal' //the class of a button or element that will close an open modal}
;
	//Extend dem' options var options = $.extend({
}
,defaults,options);
	return this.each(function(){
	/*--------------------------- Global Variables----------------------------*/
var modal = $(this),topMeasure = parseInt(modal.css('top')),topOffset = modal.height() + topMeasure,locked = false,modalBG = $('.reveal-modal-bg');
	/*--------------------------- Create Modal BG----------------------------*/
if(modalBG.length == 0){
	modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
	modalBG.css({
	position:"absolute",height:$(document).height(),opacity:"0.35"}
);
}
/*--------------------------- Open and add Closing Listeners----------------------------*/
//Open Modal ImmediatelyopenModal();
	//Close Modal Listenersvar closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent',closeModal)if(options.closeonbackgroundclick){
	modalBG.css({
	"cursor":"pointer"}
)modalBG.bind('click.modalEvent',closeModal)}
/*--------------------------- Open & Close Animations----------------------------*/
//Entrance Animationsfunction openModal(){
	modalBG.unbind('click.modalEvent');
	$('.' + options.dismissmodalclass).unbind('click.modalEvent');
	if(!locked){
	lockModal();
	if(options.animation == "fadeAndPop"){
	modal.css({
	'top':$(document).scrollTop()-topOffset,'opacity':0,'visibility':'visible'}
);
	modalBG.fadeIn(options.animationspeed/2);
	modal.delay(options.animationspeed/2).animate({
	"top":$(document).scrollTop()+topMeasure,"opacity":1}
,options.animationspeed,unlockModal());
}
if(options.animation == "fade"){
	modal.css({
	'opacity':0,'visibility':'visible','top':$(document).scrollTop()+topMeasure}
);
	modalBG.fadeIn(options.animationspeed/2);
	modal.delay(options.animationspeed/2).animate({
	"opacity":1}
,options.animationspeed,unlockModal());
}
if(options.animation == "none"){
	modal.css({
	'visibility':'visible','top':$(document).scrollTop()+topMeasure}
);
	modalBG.css({
	"display":"block"}
);
	unlockModal()}
}
}
//Closing Animationfunction closeModal(){
	if(!locked){
	lockModal();
	if(options.animation == "fadeAndPop"){
	modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
	modal.animate({
	"top":$(document).scrollTop()-topOffset,"opacity":0}
,options.animationspeed/2,function(){
	modal.css({
	'top':topMeasure,'opacity':1,'visibility':'hidden'}
);
	unlockModal();
}
);
}
if(options.animation == "fade"){
	modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
	modal.animate({
	"opacity":0}
,options.animationspeed,function(){
	modal.css({
	'opacity':1,'visibility':'hidden','top':topMeasure}
);
	unlockModal();
}
);
}
if(options.animation == "none"){
	modal.css({
	'visibility':'hidden','top':topMeasure}
);
	modalBG.css({
	'display':'none'}
);
}
}
}
/*--------------------------- Animations Locks----------------------------*/
function unlockModal(){
	locked = false;
}
function lockModal(){
	locked = true;
}
}
);
	//each call}
//orbit plugin call}
)(jQuery);

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