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 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
JavaScript对象属性操作实例解析
Feb 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
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python 处理string到hex脚本的方法
2018/10/26 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
基于python 取余问题(%)详解
2020/06/03 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
Python 多进程原理及实现
2020/12/21 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
遥感技术与仪器求职信
2014/02/22 职场文书
家长建议怎么写
2014/05/15 职场文书
先进单位申报材料
2014/12/25 职场文书
导游词幽默开场白
2019/06/26 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python