急急急!!!点击div弹出一个div弹框

xiaoxiao_2020 2017-10-17 08:23:58

点击其中一个div弹出一个div弹框,弹出来的弹框内容跟页面中一样的div。先谢谢各位!!!
...全文
1015 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
imsprojo2FAN 2017-10-19
  • 打赏
  • 举报
回复
引用 12 楼 xiaoxiao_2020 的回复:
[quote=引用 11 楼 Imsprojo2FAN 的回复:] 加强版。。。。。。。。。。。。。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style> 

.btn1 {
	margin-left:10% ;
	margin-top:5% ;
    border-radius: 25px;
    background: rgba(182, 162, 222, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;  
    display: inline-block; 
    cursor: pointer; 
}

.btn2 {
	margin-left:2% ;
	margin-top:5% ;
    border-radius: 25px;
    background: rgba(90, 177, 239, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;   
    display: inline-block; 
    cursor: pointer;
}

.text01{
	margin:0 auto; 
	background: white;
	width: 50%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text02{
	margin:10px auto; 
	background: white;
	width: 90%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text03{
	margin:0 auto; 
	background: white;
	width: 50%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text04{
	margin:10px auto; 
	background: white;
	width: 90%;
	height:auto;
	text-align: center;
	padding:6px;
}

.content{
    border-radius: 25px;
    background: rgba(182, 162, 222, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;  
    display: inline-block; 
    cursor: pointer; 
}


/*
*/

</style>
<script type="text/javascript">
	$(function(){

		$('.btn1').on('click', function(event) {
			clear();
			$('.content').css('background', '#B6A2DE');
			var lable = $('#title01').text();
			var content = $('.text02').text();
			$('#myModalLabel').html(lable);
			$('#line01').html(lable);
			$('#line02').html(content);

		});

		$('.btn2').on('click', function(event) {
			clear();
			$('.content').css('background', '#5AB1EF');
			var lable = $('#title02').text();
			var content = $('.text04').text();
			$('#myModalLabel').html(lable);
			$('#line01').html(lable);
			$('#line02').html(content);
		});


		$('.btn1,.text01,.text02').mouseenter(function(event) {
			$('.btn1').css('background', '#B6A2DE');
		});
		$('.btn1').mouseout(function(event) {
			$('.btn1').css('background', 'rgba(182, 162, 222, 0.6)');
		});

		$('.btn2,.text03,.text04').mouseenter(function(event) {
			$('.btn2').css('background', '#5AB1EF');
		});
		$('.btn2').mouseout(function(event) {
			$('.btn2').css('background', 'rgba(90, 177, 239, 0.6)');
		});
	});

	function clear(){
		$('#line01').html('');
		$('#line02').html('');
	}
</script>
</head>
<body>
	<div class="btn1" data-toggle="modal" data-target="#myModal">
		<div id="title01" class="text01">举例2系列</div>
		<div class="text02">
				实时收入:1000000
				月累计收入:300W
		</div>
	</div>
	<div class="btn2" data-toggle="modal" data-target="#myModal">
		<div id="title02" class="text03">举例3系列</div>
		<div class="text04">
			实时收入:1000000
			月累计收入:300W
		</div>
	</div>


	<!-- 模态框(Modal) -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						
					</h4>
				</div>
				<div class="modal-body">
					<span class="content" >
						<div id="line01" class="text01"></div>
						<div id="line02" class="text02">
						</div>
					</span>
				</div>
				<!-- <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary">
						提交更改
					</button>
				</div> -->
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>


</body>
</html>
谢谢回答[/quote] 可以了还是不可以?代码还能优化。。 我觉得你可以多学学前端基本的,告诉你个学习的网站:菜鸟教程
xiaoxiao_2020 2017-10-19
  • 打赏
  • 举报
回复
引用 11 楼 Imsprojo2FAN 的回复:
加强版。。。。。。。。。。。。。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style> 

.btn1 {
	margin-left:10% ;
	margin-top:5% ;
    border-radius: 25px;
    background: rgba(182, 162, 222, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;  
    display: inline-block; 
    cursor: pointer; 
}

.btn2 {
	margin-left:2% ;
	margin-top:5% ;
    border-radius: 25px;
    background: rgba(90, 177, 239, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;   
    display: inline-block; 
    cursor: pointer;
}

.text01{
	margin:0 auto; 
	background: white;
	width: 50%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text02{
	margin:10px auto; 
	background: white;
	width: 90%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text03{
	margin:0 auto; 
	background: white;
	width: 50%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text04{
	margin:10px auto; 
	background: white;
	width: 90%;
	height:auto;
	text-align: center;
	padding:6px;
}

.content{
    border-radius: 25px;
    background: rgba(182, 162, 222, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;  
    display: inline-block; 
    cursor: pointer; 
}


/*
*/

</style>
<script type="text/javascript">
	$(function(){

		$('.btn1').on('click', function(event) {
			clear();
			$('.content').css('background', '#B6A2DE');
			var lable = $('#title01').text();
			var content = $('.text02').text();
			$('#myModalLabel').html(lable);
			$('#line01').html(lable);
			$('#line02').html(content);

		});

		$('.btn2').on('click', function(event) {
			clear();
			$('.content').css('background', '#5AB1EF');
			var lable = $('#title02').text();
			var content = $('.text04').text();
			$('#myModalLabel').html(lable);
			$('#line01').html(lable);
			$('#line02').html(content);
		});


		$('.btn1,.text01,.text02').mouseenter(function(event) {
			$('.btn1').css('background', '#B6A2DE');
		});
		$('.btn1').mouseout(function(event) {
			$('.btn1').css('background', 'rgba(182, 162, 222, 0.6)');
		});

		$('.btn2,.text03,.text04').mouseenter(function(event) {
			$('.btn2').css('background', '#5AB1EF');
		});
		$('.btn2').mouseout(function(event) {
			$('.btn2').css('background', 'rgba(90, 177, 239, 0.6)');
		});
	});

	function clear(){
		$('#line01').html('');
		$('#line02').html('');
	}
</script>
</head>
<body>
	<div class="btn1" data-toggle="modal" data-target="#myModal">
		<div id="title01" class="text01">举例2系列</div>
		<div class="text02">
				实时收入:1000000
				月累计收入:300W
		</div>
	</div>
	<div class="btn2" data-toggle="modal" data-target="#myModal">
		<div id="title02" class="text03">举例3系列</div>
		<div class="text04">
			实时收入:1000000
			月累计收入:300W
		</div>
	</div>


	<!-- 模态框(Modal) -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						
					</h4>
				</div>
				<div class="modal-body">
					<span class="content" >
						<div id="line01" class="text01"></div>
						<div id="line02" class="text02">
						</div>
					</span>
				</div>
				<!-- <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary">
						提交更改
					</button>
				</div> -->
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>


</body>
</html>
谢谢回答
imsprojo2FAN 2017-10-19
  • 打赏
  • 举报
回复
加强版。。。。。。。。。。。。。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style> 

.btn1 {
	margin-left:10% ;
	margin-top:5% ;
    border-radius: 25px;
    background: rgba(182, 162, 222, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;  
    display: inline-block; 
    cursor: pointer; 
}

.btn2 {
	margin-left:2% ;
	margin-top:5% ;
    border-radius: 25px;
    background: rgba(90, 177, 239, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;   
    display: inline-block; 
    cursor: pointer;
}

.text01{
	margin:0 auto; 
	background: white;
	width: 50%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text02{
	margin:10px auto; 
	background: white;
	width: 90%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text03{
	margin:0 auto; 
	background: white;
	width: 50%;
	height:auto;
	text-align: center;
	padding:6px;
}
.text04{
	margin:10px auto; 
	background: white;
	width: 90%;
	height:auto;
	text-align: center;
	padding:6px;
}

.content{
    border-radius: 25px;
    background: rgba(182, 162, 222, 0.6);
    padding: 20px; 
    width: 200px;
    height: 135px;  
    display: inline-block; 
    cursor: pointer; 
}


/*
*/

</style>
<script type="text/javascript">
	$(function(){

		$('.btn1').on('click', function(event) {
			clear();
			$('.content').css('background', '#B6A2DE');
			var lable = $('#title01').text();
			var content = $('.text02').text();
			$('#myModalLabel').html(lable);
			$('#line01').html(lable);
			$('#line02').html(content);

		});

		$('.btn2').on('click', function(event) {
			clear();
			$('.content').css('background', '#5AB1EF');
			var lable = $('#title02').text();
			var content = $('.text04').text();
			$('#myModalLabel').html(lable);
			$('#line01').html(lable);
			$('#line02').html(content);
		});


		$('.btn1,.text01,.text02').mouseenter(function(event) {
			$('.btn1').css('background', '#B6A2DE');
		});
		$('.btn1').mouseout(function(event) {
			$('.btn1').css('background', 'rgba(182, 162, 222, 0.6)');
		});

		$('.btn2,.text03,.text04').mouseenter(function(event) {
			$('.btn2').css('background', '#5AB1EF');
		});
		$('.btn2').mouseout(function(event) {
			$('.btn2').css('background', 'rgba(90, 177, 239, 0.6)');
		});
	});

	function clear(){
		$('#line01').html('');
		$('#line02').html('');
	}
</script>
</head>
<body>
	<div class="btn1" data-toggle="modal" data-target="#myModal">
		<div id="title01" class="text01">举例2系列</div>
		<div class="text02">
				实时收入:1000000
				月累计收入:300W
		</div>
	</div>
	<div class="btn2" data-toggle="modal" data-target="#myModal">
		<div id="title02" class="text03">举例3系列</div>
		<div class="text04">
			实时收入:1000000
			月累计收入:300W
		</div>
	</div>


	<!-- 模态框(Modal) -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						
					</h4>
				</div>
				<div class="modal-body">
					<span class="content" >
						<div id="line01" class="text01"></div>
						<div id="line02" class="text02">
						</div>
					</span>
				</div>
				<!-- <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary">
						提交更改
					</button>
				</div> -->
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>


</body>
</html>
q-9366205 2017-10-18
  • 打赏
  • 举报
回复
$("#pack02").hide(); $("#wrap").click(function(){ $("#pack02").show(); })
縱頭開始 2017-10-18
  • 打赏
  • 举报
回复
也行的,,,,,,
縱頭開始 2017-10-18
  • 打赏
  • 举报
回复
看不到你的html,我也不知道怎么教
縱頭開始 2017-10-18
  • 打赏
  • 举报
回复
$("#div1").on("click",function (){ $("#div2").html(this.html()); }) 这样就好啦,加个事件,把div1的html复制到div2中
xiaoxiao_2020 2017-10-18
  • 打赏
  • 举报
回复
引用 9 楼 qq_33563609 的回复:
$("#pack02").hide();
$("#wrap").click(function(){
$("#pack02").show();
})



不是隐藏一个载显示,是要点击一个弹出一个弹框,弹框里显示另外的div,然后点击弹框里的div跳转页面
xiaoxiao_2020 2017-10-18
  • 打赏
  • 举报
回复
引用 6 楼 q1073432419 的回复:
看不到你的html,我也不知道怎么教
我全部贴上去了呀!我用的是jsp页面。css和jsp页面的内容都贴上去了
xiaoxiao_2020 2017-10-18
  • 打赏
  • 举报
回复
引用 3 楼 q1073432419 的回复:
$("#div1").on("click",function (){ $("#div2").html(this.html()); }) 这样就好啦,加个事件,把div1的html复制到div2中
xiaoxiao_2020 xiaoxiao_2020 xiaoxiao_2020 T1 试了下,添加事件,但是没有效果, 我是要点击页面上的一个div然后跳出弹框,弹框里也有div,然后点击弹框里的div跳转页面
xiaoxiao_2020 2017-10-18
  • 打赏
  • 举报
回复
试了下,添加事件,但是没有效果, 我是要点击页面上的一个div然后跳出弹框,弹框里也有div,然后点击弹框里的div跳转页面
xiaoxiao_2020 2017-10-17
  • 打赏
  • 举报
回复
做出这种效果


谢谢各位了
xiaoxiao_2020 2017-10-17
  • 打赏
  • 举报
回复
css

div

51,397

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧