jquery怎么让页面弹出窗口
2个回答
展开全部
<html>
<head><title>Simple jsp page</title>
<style type="text/css">
<!--
#div1 {
position:absolute;
left:338px;
top:91px;
width:446px;
height:294px;
z-index:1;
border:solid #7A7A7A 4px;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").hide(); //先让div隐藏
$("#span1").click(function(){
$("#div1").fadeIn("slow");//淡入淡出效果 显示div
});
$("#span2").click(function(){
$("#div1").fadeOut("slow");//淡入淡出效果 隐藏div
})
});
</script>
</head>
<body>
1个简单弹出div的小例子 页面不是很美观 效果达到了<p/><p/><p/><p/><p/><p/>
<span style="cursor:pointer" id="span1">点我弹出div</span>
<div id="div1">
<div align="right" style="background-color:#CDCDCD;"><span id="span2" style="cursor:pointer">关闭</span>
</div>
<p><p>
<form>
username:<input type="text"/><p />
age:<input type="text"/><p />
<input type="submit" value="submit"/><br />
</form>
</div>
</body>
</html>
以上代码直接复制粘贴，html文件就可以运行，可以做弹出操作。
<head><title>Simple jsp page</title>
<style type="text/css">
<!--
#div1 {
position:absolute;
left:338px;
top:91px;
width:446px;
height:294px;
z-index:1;
border:solid #7A7A7A 4px;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").hide(); //先让div隐藏
$("#span1").click(function(){
$("#div1").fadeIn("slow");//淡入淡出效果 显示div
});
$("#span2").click(function(){
$("#div1").fadeOut("slow");//淡入淡出效果 隐藏div
})
});
</script>
</head>
<body>
1个简单弹出div的小例子 页面不是很美观 效果达到了<p/><p/><p/><p/><p/><p/>
<span style="cursor:pointer" id="span1">点我弹出div</span>
<div id="div1">
<div align="right" style="background-color:#CDCDCD;"><span id="span2" style="cursor:pointer">关闭</span>
</div>
<p><p>
<form>
username:<input type="text"/><p />
age:<input type="text"/><p />
<input type="submit" value="submit"/><br />
</form>
</div>
</body>
</html>
以上代码直接复制粘贴，html文件就可以运行，可以做弹出操作。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
推荐layer插件 挺好用的你可以查一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
