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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
js+css实现导航效果实例
Feb 10 Javascript
javascript 闭包详解
Jul 02 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
tensorflow 查看梯度方式
2020/02/04 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
毕业晚会主持词
2014/03/24 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
大学生求职信例文
2014/06/29 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS