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

xiaoxiao_2020 2017-10-17 08:23:58

点击其中一个div弹出一个div弹框，弹出来的弹框内容跟页面中一样的div。先谢谢各位！！！
...全文
1014 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
急急急！！！！怎么下载一个指定DIV里面的图片到本地呀！！！！！！！！！！！！！！
小第虚心求都，各位大哥帮忙解决下这个问题呀，我现在要实现的功能就是， 假设现在有一个字符串，或者是一个DIV里面的内容，我怎么样才能把这个里面内容属于图片IMG 的全部下载到本地上。。 很急。。。 谢谢大家的...
java 缓冲区怎么理解_JAVA中的缓存是怎么一回事？？帮忙解释下。急急急！！！！！！谢谢...
JAVA中的缓存是怎么一回事？？帮忙解释下。急急急！！！！！！谢谢mip版关注:133答案:5悬赏:80解决时间 2021-01-24 22:17已解决2021-01-24 18:44JAVA中的缓存...一个是Ｓession级别的缓存，它是第一级别缓存属于进程...
怎样实现模块间的参数传递?急急急!!!!!!!!!
怎样实现模块间的参数传递?急急急!!...我现在做一个简易的登录器,由一个登录界面,及登录后的一些模块,但登录成功进入另一个模块后,我需要知道当前是谁登录的系统,好久都想不通,请高人指点,谢谢!...
java重新循环_Java中的while循环结构 用户重新输入的代码问题！急急急！！
急急急！！需求描述：进入系统主菜单后,提示用户输入数字,然后根据选择进入相应的功能模块,如果用户输入错误,可以重复输入,直到输入正...Java中的while循环结构 用户重新输入的代码问题！急急急！！需求描述：进入...
计算机专业外语英译汉,计算机专业英语翻译(英译汉)急急急!~~~急急急!~~~
计算机专业英语翻译(英译汉)急急急!~~~急急急!~~~0wxmdhy2013.11.15浏览296次分享举报The Control UnitThe control unit is the functional unit that takes the responsibility forsupervising the operation of ...
Java

51,397

社区成员

85,844

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章