JQuery+CSS提示框实现思路及代码(纯手工打造)_Javascript教程-查字典教程网
JQuery+CSS提示框实现思路及代码(纯手工打造)
JQuery+CSS提示框实现思路及代码(纯手工打造)
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:背景透明*{margin:0;padding:0;}body{position:relative;width:100%;h...

复制代码 代码如下:

<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=""></div>

<div>

<div>

<span id="close"><a href="javascript:void(0);">关闭</a></span>

</div>

<div>

<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教程学习
    编程开发子分类