jQuery轻量级弹出框js代码

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

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

以下是 jQuery轻量级弹出框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]--> 
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery轻量级模态窗口弹出框</title>
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	
    <style type="text/css">
    .clear {
      zoom: 1;
      display: block;
    }
    </style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>  
    <section class="centerUp">
        <h1>Pop Easy Demo</h1>
        <a class="modalLink" href="#modal1">Click Me</a>
    </section>

    <div class="overlay"></div>

    <div id="modal1" class="modal">
        <p class="closeBtn">Close</p>
        <h2>Your Content Here</h2>
    </div>
        
    <script src="js/jquery-1.9.1.js"></script>
    <script type='text/javascript' src='js/jquery.modal.js'></script>
    <script type='text/javascript' src='js/site.js'></script>
</body>
</html>

JS代码(site.js):

$(document).ready(function(){
	$('.modalLink').modal({
	trigger:'.modalLink',// id or class of link or button to trigger modal olay:'div.overlay',// id or class of overlay modals:'div.modal',// id or class of modal animationEffect:'slideDown',// overlay effect | slideDown or fadeIn | default=fadeIn animationSpeed:400,// speed of overlay in milliseconds | default=400 moveModalSpeed:'slow',// speed of modal movement when window is resized | slow or fast | default=false background:'a2d3cd',// hexidecimal color code - DONT USE # opacity:0.7,// opacity of modal | 0 - 1 | default = 0.8 openOnLoad:false,// open modal on page load | true or false | default=false docClose:true,// click document to close | true or false | default=true closeByEscape:true,// close modal by escape key | true or false | default=true moveOnScroll:true,// move modal when window is scrolled | true or false | default=false resizeWindow:true,// move modal when window is resized | true or false | default=false video:'http://player.vimeo.com/video/2355334?color=eb5a3d',// enter the url of the video videoClass:'video',// class of video element(s) close:'.closeBtn' // id or class of close button}
);
}
);

CSS代码(main.css):

@import url(http://fonts.googleapis.com/css?family=Playfair+Display);/* \\\\\\\\\\\\\\\\\ DEMO CODE ///////////////////////////////// */
applet,object,iframe,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,caption,img,header,section{margin:0;padding:0;outline:none;border:none;}
.centerUp{margin:0 auto;width:960px;}
body{background:#fffceb;color:#333;font-size:13px;font-family:Arial,sans-serif;font-family:'Playfair Display',serif;text-align:center;color:#3a6a7e;}
h1{font-size:80px;margin:80px 0 100px;}
h2{margin:100px 0 0;color:#eb5a3d;}
p{font-size:20px;}
.modal p{font-size:14px;text-align:left;margin:10px 0 0;}
.modal p:hover{cursor:pointer;}
a{display:block;width:280px;height:50px;margin:0 auto;margin-bottom:80px;padding:30px 0 0;font-size:18px;color:#fff;text-decoration:none;background:#eb5a3d;-webkit-box-shadow:inset 0 1px 1px #ffbfb3,0 2px 5px #732e20;-moz-box-shadow:inset 0 1px 1px #ffbfb3,0 2px 5px #732e20;box-shadow:inset 0 1px 1px #ffbfb3,0 2px 5px #732e20;border:1px solid #884335;}
a:hover{background:#ea5234;}
/* \\\\\\\\\\\\\\\\\ END DEMO CODE ///////////////////////////////// */
/* \\\\\\\\\\\\\\\\\ MODAL CODE ///////////////////////////////// */
.overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;display:none;}
.modal{display:none;background:#eee;padding:0 20px 20px;overflow:auto;z-index:1001;position:absolute;width:500px;min-height:300px;}
/* \\\\\\\\\\\\\\\\\ END MODAL CODE ///////////////////////////////// */

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