1.jquery实现弹出对话框
<style type="text/css">
#dialog{
height:400px;
width:600px;
border:6px solid #ccc;
position:fixed;
left:50%;
margin-left:-200px;
top:100px;
display:none;
z-index:100;
}
#dialog h1.title{
font-size:12px;
margin:0px;
padding:0px;
height:30px;
background:#dfd;
}
#dialog h1 span{
font-weight:normal;
padding:2px 5px;
border:1px solid #acf;
position:relative;
left:360px;
top:6px;
cursor:pointer;
}
#dialog #content{
background:#ee9;
height:370px;
overflow:scroll;
}
#zzc{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:#999;
z-index:99;
display:none;
}
</style>
<script type="text/javascript" src="../jquery-2.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#diaBtn").on("click",function(){
var url=$("#url").val();
if(!url) url="01.html";
$("#dialog").find("#content").load(url)
.end().fadeIn(1000);
$("#zzc").css({
opacity:0.3,
display:"block"
});
});
$("#dialog h1.title span").on("click",function(){
$("#dialog").fadeOut(1000);
$("#zzc").css("display","none");
})
});
</script>
2.jquery滚动加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.1.1.js"></script>
<script type="text/javascript">
$(function(){
var index=1;
loadData();
$(window).scroll(function(){
var pa=$(this).scrollTop()+20>=$(document).height()-$(this).height();
if(index>10){
$("body").append("加载完成");
$(this).off("scroll");
}
if(pa){
loadData();
}
});
function loadData(){
index++;
$.get("05_con.html",function(data){
$("#content").append(data);
},"html")
}
});
</script>
</head>
<body>
<h1>无限滚动加载</h1>
<div id="content"></div>
</body>
</html>
