JQuery+CSS提示框实现思路及代码(纯手工打造)


Posted in Javascript onMay 07, 2013
<html> 
<head> 
<meta charset="utf-8" /> 
<script type="text/javascript" src="jquery-1.8.2.js"></script> 
<title>背景透明</title> 
<style> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
position:relative; 
width:100%; 
height:100%; 
} 
.aaa{ 
background-color:#fff; 
border:10px solid gray; 
border-radius:4px 4px 4px 4px; 
display:none; 
width:300px; 
position:absolute; 
top:30%; 
left:30%; 
z-index:11; 
} 
.show{ 
display:none; 
width:100%; 
height:100%; 
position:absolute; 
z-index:10; 
left:0; 
top:0; 
background:#000000; 
opacity:0.3; 
filter:alpha(opacity=30); 
} 
a{ 
TEXT-DECORATION:none 
} 
.w_close:hover{ 
color:#666666; 
font-size:12px; 
} 
.w_close:link { 
color:#666666; 
font-size:12px; 
} 
.w_close:active{ 
color:#666666; 
font-size:12px; 
} 
.w_close:visited { 
color:#666666; 
font-size:12px; 
} 
</style> 
</head> 
<body > 
<div id="test"> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p> 
</div> 
<div id="showError">显示提示</div> 
<div id="" class="show"></div> 
<div class="aaa"> 
<div style="height:20px;background-color:#F2F2F2"> 
<span style="float:right;cursor:pointer;padding-top:4px;padding-right:4px;" id="close"><a class="w_close" href="javascript:void(0);">关闭</a></span> 
</div> 
<div style=""> 
<table> 
<tr> 
<th>用户名:</th> 
<td><input type="text" name="name"></td> 
</tr> 
<tr> 
<th>密码:</th> 
<td><input type="password" name="password"></td> 
</tr> 
<tr> 
<td><input type="submit" value="提交"></td> 
</tr> 
</table> 
</div> 
</div> 
</body> 
<script type="text/javascript"> 
$("#showError").live('click',function(){ 
$(".show").show(); 
$(".aaa").show(); 
//$("body").addClass("fli"); 
}) 
$("#test").live('click',function(){ 
alert(11111); 
}) 
$("#close").live('click',function(){ 
$(".show").hide(); 
$(".aaa").hide(); 
}) 
</script> 
</html>
Javascript 相关文章推荐
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
axios封装与传参示例详解
Oct 18 Javascript
React实现todolist功能
Dec 28 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 #Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 #Javascript
jQuery的slideToggle方法实例
May 07 #Javascript
jQuery实现动画效果的实例代码
May 07 #Javascript
nullJavascript中创建对象的五种方法实例
May 07 #Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 #Javascript
javascript中的startWith和endWith的几种实现方法
May 07 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
提高PHP编程效率的方法
2013/11/07 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
js CSS操作方法集合
2008/10/31 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
使用Python对Access读写操作
2017/03/30 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
校长岗位职责
2013/11/26 职场文书
中学生期末评语
2014/02/03 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Python连续赋值需要注意的一些问题
2021/06/03 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis