jquery 弹出框效果
jQuery 效果 弹出
2023-09-11 14:22:19 时间
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出框效果</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> <style> body { font-size:12px; padding:100px; } .box { float:left; padding:5px; background:#eee; position:absolute; top:20%; left:25%; border-radius: 20px; } .box1 { width:500px; border:1px solid #4c7ebd;display:none; border-radius: 20px; } .box1 h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; } .box1 span { float:right; padding-right:10px; cursor:pointer;} .box1 span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; text-indent:-9999px;} .box1 span a:hover { background:url(img/close_hover.jpg) no-repeat;} .box1 p { padding:10px; height:300px; background:#fff; border:3px solid #eee;text-align:center; } .one { display:block;background-color: azure;width:50px;color: black;} </style> </head> <body> <input type=" submit" class="one" value="弹出框"> <div class="box"> <div class="box1"> <h1><span><a href="#">关闭</a></span>这是标题</h1> <p>这是内容</p> </div> </div> </body> </html>
js
$(document).ready(function(){ $('.one').click(function(){ $('.box1').show(); }); $('span').click(function(){ $('.box1').hide(); }); $('.box').easydrag(); });
效果:
2017-09-23 22:10:02
相关文章
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
- jQuery 全选,反选,取消
- jQuery侧边栏手风琴菜单效果(1+X Web前端开发初级 例题)
- jquery div拖动效果示例代码
- jquery mobile event
- jQuery 遍历方法总结
- 《jQuery UI 开发指南》——2.3 tabs ()方法
- 《jQuery与JavaScript入门经典》——导读
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.5 技巧:显示页面正在加载的信息
- 高仿阴阳师官网轮播图效果的jQuery插件
- Jquery插件写法及extentd函数
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- jquery中Live方法不可用,Jquery中Live方法失效
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
- Nice Jquery Validator 快速上手
- jQuery select三级联动
- jQuery CircleCounter的环形倒计时效果
- jQuery框架开发一个最简单的幻灯效果
- 使用jQuery创建模态窗口登陆效果
- 玩转spring boot——结合jQuery和AngularJs
- 使用jquery操作元素的css样式(获取、修改等等)
- jQuery效果-隐藏与显示 小方块的移除