fancybox 基础 简单demo

时间:2022-08-10 10:17:14
 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