overhang实现顶部提示通知框弹出效果代码
代码语言:html
所属分类:弹出层
代码描述:overhang实现顶部提示通知框弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery顶部通知提示插件overhang.js</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/overhang.min.css"> <style> .wrap { width: 600px; margin: 0 auto; } .wrap table { width: 600px; border-collapse: collapse; border-spacing: 0; } .wrap td { padding: 10px; border: 1px solid #ddd; } .wrap td:first-child { width: 40%; text-align: right; } .wrap a { display: inline-block; width: 100px; height: 40px; line-height: 40px; color: #fff; text-align: center; background-color: #f90; text-decoration: none; } .wrap a:hover { background-color: #f80; } </style> </head> <body> <h1>jQuery顶部通知提示插件overhang.js演示</h1> <div class="wrap"> <table> <tbody> <tr> <td>默认</td> <td><a href="javascript:" class="btn1">点我</a></td> </tr> <tr> <td>带关闭按钮</td> <td><a href="javascript:" class="btn2">点我</a></td> </tr> <tr> <td>显示时长(5秒)</td> <td><a href="javascript:" class="btn3">点我</a></td> </tr> <tr> <td>警告信息</td> <td><a href="javascript:" class="btn4">点我</a></td> </tr> <tr> <td>输入框及查看结果</td> <td> <a href="javascript:" class="btn5">点我</a> <a href="javascript:" class="btn5-2">查看</a> </td> </tr> <tr> <td>确认框及查看结果</td> <td> <a href="javascript:" class="btn6">点我</a> <a href="javascript:" class="btn6-2">查看</a> </td> </tr> <tr> <td>自定义样式</td> <td><a href="javascript:" class="btn7">点我</a></td> </tr> <tr> <td>回调函数</td> <td><a href="javascript:" class="btn8">点我</a></td> </tr> </tbody> </table> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/overhang.min.js"></script> <script> $(function() { $('.btn1').on('click', function() { $('.........完整代码请登录后点击上方下载按钮下载查看
网友评论0