fancybox 基础简单demo

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <link href="css/fancybox.css" rel="stylesheet" />
 5 
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 7     <title>弹出框demo</title>
 8 </head>
 9 <body>
10 
11     <div id="main">
12     <a href="#adddivtest" id="addbtndiv">测试</a>
13     </div>
14 
15 
16 
17     <!--弹出框部分-->
18     <div style="display:none;">
19         <div id="adddivtest">
20             <div class="title">任务类型：</div>
21             <div class="title">任务类型：</div>
22             <div class="title">任务类型：</div>
23         </div>
24     </div>
25 </body>
26 </html>
27 <script src="script/jquery-1.8.3.min.js"></script>
28 <script src="script/jquery.fancybox.model.js"></script>
29 <script src="script/jquery.control.js"></script>
30 <script src="script/jquery.control.init.js"></script>
31 <script>
32   
33     window.onload=function() {
34         /*弹出框js*/
35         $("#addbtndiv").fancybox({
36             'autoDimensions': false,
37             'centerOnScroll': true,
38             'scrolling': false,
39             'width': 480,
40             'height': 580
41         });
42 
43     }
44        
45 </script>

由于没有地方上传源码，js 图片资源只能靠自己了

fancybox 基础 简单demo

fancybox 基础简单demo