模拟弹出窗口效果插件 v1.0
注意：在网页的头部引用abDialog.css插件所需的弹出窗口样式文件，在网页的头部或底部引用jQuery.js和abDialog.js两个js文件。一定要确保在abTips.js之前放置jquery.js前后顺序不能乱。
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>domo-abDialog演示例子</title>
6. <script type="text/javascript" src="js/jquery.min.js"></script> <!-- 必须存在1 -->
7. <script type="text/javascript" src="js/jquery.abDialog.min.js"></script> <!-- 必须存在2 -->
8. </head>
9. <body>
注意：创建一个层如此例子DemoBox。在其内部为ul li编写显示需要弹窗的html样式。并在需要显示弹窗的位置添加唯一识别的id或class名调用的时候需要用到，插件会根据识别的id或class弹出窗口。
1. <div class="DemoBox">
2. <ul> <!-- id=DemoBox-数字，为插件调用识别必须存在，可自定义名应与调用处保持一致。-->
3. <li><p id="DemoBox1"><a href="javascript:void(0)" title="弹窗1">无标题弹窗 ①</a></p></li>
4. <li><p id="DemoBox2"><a href="javascript:void(0)" title="弹窗2">无标题弹窗 ②</a></p></li>
5. <li><p id="DemoBox3"><a href="javascript:void(0)" title="弹窗3">有标题弹窗 ①</a></p></li>
6. <li><p id="DemoBox4"><a href="javascript:void(0)" title="弹窗4">有标题弹窗 ②</a></p></li>
7. </ul>
8. </div>
注意：编写 html 和 css 样式时一定要注意，id或class名尽量为唯一，避免和你的其它插件发生冲突。jquery.abDialog.min.js 才能正常的工作。
1. <style type="text/css">
2. * { margin:0; padding:0; }
3. body { background:#fff; font-size:12px; }
4. ul,li { list-style:none; }
5. p { word-wrap:break-word; }
6. img { border:0; vertical-align:middle; }
7. a { color:#333; text-decoration:none; }
8. a:hover { color:#1974A1; text-decoration:none; }
9. /* 弹出窗口层插件js所包含的样式.abDialog-body，必须存在 */
17. .abDialog-body .abDialog-content { padding:8px; }
18. .abDialog-body .abDialog-border { border-radius: 3px; background: #000; }
19. .abDialog-body .abDialog-header { height: 30px; padding: 5px 0px; background: #f2f2f2; }
20. .abDialog-body .abDialog-title { float: left; line-height: 30px; margin-left: 20px; font-size: 16px;
21. font-weight:500; color:#38c; display: block; }
22. .abDialog-body .abDialog-close { float:right; width: 17px; height: 16px; margin:10px 20px 0 0;
23. line-height: 28px; border-radius: 3px; font-family: 'Comic Sans MS', cursive; font-size: 26px; color: #c33;
24. text-indent:-9999px; cursor: pointer; overflow: hidden; display: block; }
25. .abDialog-body .abDialog-close a { background:url(demo/images/close_02.png) no-repeat; width:17px;
26. height:16px; display:block; background-position:0 0; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
27. .abDialog-body .abDialog-close a:hover { background-position:0 -16px; }
24. .abDialog-body .abDialog-data { padding: 20px 0px; }
28. /* 自定义展示css样式.DemoBox，非插件必须样式 */
29. .DemoBox { width:320px; height:365px; background:#fff; text-align:center; }
30. .DemoBox ul { padding-top:50px; }
31. .DemoBox p { width:260px; font-size:16px; height:45px; line-height:45px; margin:0 auto 20px auto;
32. display:block; cursor:pointer; }
33. .DemoBox p span { font-style:italic; }
34. .DemoBox p a { width:260px; display:block; color:#fff; background:#3dc878; text-decoration:none; }
35. .DemoBox p a:hover { color:#fff; background:#4ad585; }
36. </style>
注意：在要使用效果的div父层DemoBox外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，或放置在一个统一的js文件里面引用，方便维护与管理。
1. <script type="text/javascript">
2. $("#DemoBox1").click(function(e) {
3. $(document).abDialog({
4. width:400, /* 弹出窗口的宽度，可自行修改 */
5. height:320, /* 弹出窗口的高度，可自行修改 */
6. borderOpacity: 0.1, /* 弹出窗口边框的透明度，可自行修改 */
7. opacity:0.6, /* 弹出窗口背景的透明度，可自行修改 */
8. type: "iframe", /* iframe是HTML标签，元素会创建包含另外一个文档的内联框架（即行内框架） */
9. data: "demo/demo1.html" /* 你的弹窗内容相关页面地址可随意自行修改 */
10. });
11. return false;
12. }); /* DemoBox1 点击窗口外任意位置或叉叉都能关闭弹窗 不带标题 */
13. </script>
1. <script type="text/javascript">
2. $("#DemoBox2").click(function(e) {
3. $(document).abDialog({
4. width:400, /* 弹出窗口的宽度，可自行修改 */
5. height:320, /* 弹出窗口的高度，可自行修改 */
6. borderOpacity: 0.1, /* 弹出窗口边框的透明度，可自行修改 */
7. opacity:0.6, /* 弹出窗口背景的透明度，可自行修改 */
8. clickBgClose: "false", /* true或false */
9. type: "iframe", /* iframe是HTML标签，元素会创建包含另外一个文档的内联框架（即行内框架） */
10. data: "demo/demo2.html" /* 你的弹窗内容相关页面地址可随意自行修改 */
11. });
12. return false;
13. }); /* DemoBox2 点击叉叉才能关闭弹窗 */
14. </script>
1. <script type="text/javascript">
2. $("#DemoBox3").click(function(e) {
3. $(document).abDialog({
4. width:400, /* 弹出窗口的宽度，可自行修改 */
5. height:320, /* 弹出窗口的高度，可自行修改 */
6. borderOpacity: 0.1, /* 弹出窗口边框的透明度，可自行修改 */
7. opacity:0.6, /* 弹出窗口背景的透明度，可自行修改 */
8. title: $(this).text(),/* 启用弹窗标题 */
9. type: "iframe", /* iframe是HTML标签，元素会创建包含另外一个文档的内联框架（即行内框架） */
10. data: "demo/demo3.html" /* 你的弹窗内容相关页面地址可随意自行修改 */
11. });
12. return false;
13. }); /* DemoBox3 点击窗口外任意位置或叉叉都能关闭弹窗 带标题 */
14. </script>
1. <script type="text/javascript">
2. $("#DemoBox4").click(function(e) {
3. $(document).abDialog({
4. width:400, /* 弹出窗口的宽度，可自行修改 */
5. height:320, /* 弹出窗口的高度，可自行修改 */
6. borderOpacity: 0.1, /* 弹出窗口边框的透明度，可自行修改 */
7. opacity:0.6, /* 弹出窗口背景的透明度，可自行修改 */
8. title: $(this).text(),/* 启用弹窗标题 */
9. clickBgClose: "false", /* true或false */
10. type: "iframe", /* iframe是HTML标签，元素会创建包含另外一个文档的内联框架（即行内框架） */
11. data: "demo/demo4.html" /* 你的弹窗内容相关页面地址可随意自行修改 */
12. });
13. return false;
14. }); /* DemoBox4 点击叉叉才能关闭弹窗 带标题 */
15. </script>
16. </body>
17. </html>
Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题