简单弹框

最新推荐文章于 2026-01-01 20:08:21 发布

原创最新推荐文章于 2026-01-01 20:08:21 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

1 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="bootstrap/js/jquery-1.11.0.js"></script>
<style type="text/css">
	#ttt{display: none;
		position:absolute;  //绝对位置，不保留标签位置，显示的时候不影响其他标签的位置
		top:20px;
		left:50px;  
		width: 200px;
		height: 200px;
		border: 1px red solid;
		background-color: green;
	}
</style>
<script type="text/javascript">
	function tt(){
		$("#ttt").show();
		$("#name1").val($("#ddd").text());
	}
	function hhh(){
		$("#ttt").hide();
	}
</script>
</head>
<body>
<div id="ddd">
		liudaye	
</div>
<div>
	dajiahaodajiahaodajiahaodajiahaodajiahaodajiahaodajiahaodajiahao
</div>
<div>
	dajiahao	dajiahaodajiahaodajiahaodajiahaodajiahaodajiahaodajiahaodajiahao
	
</div>
<div>
	dajiahao	dajiahaodajiahaodajiahaodajiahaodajiahaodajiahaodajiahaodajiahao
	
</div>
	<div id="ttt">
		姓名:<input type="text" id="name1"/>
		性别:<input type="text" />
		
	提交:<input type="button" value="提交" onclick="hhh()"/>
	</div>
	提交:<input type="button" value="提交" onclick="tt()"/>
</body>
</html>