js实例教程-JQuery+CSS提示框实现思路及代码

发布时间:2018-11-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-JQuery+CSS提示框实现思路及代码脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<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 >
<p id="test">
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
</p>
<p id="showError">显示提示</p>
<p id="" class="show"></p>
<p class="aaa">
<p 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>
</p>
<p 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>
</p>
</p>
</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>

代码如下:

<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 >
<p id="test">
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
<p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
</p>
<p id="showError">显示提示</p>
<p id="" class="show"></p>
<p class="aaa">
<p 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>
</p>
<p 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>
</p>
</p>
</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技巧 脚本宝典 欢迎评论哦!&nbsp;js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JQuery+CSS提示框实现思路及代码全部内容,希望文章能够帮你解决js实例教程-JQuery+CSS提示框实现思路及代码所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。