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语法总结和注意事项小结
Nov 11 Javascript
jstree的简单实例
Dec 01 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
详解vue中axios的封装
Jul 18 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
原生JS实现拖拽效果
Dec 04 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP Array交叉表实现代码
2010/08/05 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python re模块介绍
2014/11/30 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
淘宝活动策划方案
2014/02/06 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Python中字符串对象语法分享
2022/02/24 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫