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

xiaoxiao_2020 2017-10-17 08:23:58

点击其中一个div弹出一个div弹框，弹出来的弹框内容跟页面中一样的div。先谢谢各位！！！
...全文
1001 13 打赏 收藏 转发到动态 举报
写回复
用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>
神秘的裤衩 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
请教高手关于EXCEL行列转换的问题！谢谢!急急急！！！
一般的方法行不通，可能要用到宏或者编一个程序，请帮忙！
《Google Android SDK开发范例大全(第3版)》.pdf
内容简介 　　《google android sdk开发范例大全(第3版)》在上一版的基础上，以android手机应用程序开发(采用android sdk 2.3.3)为主题，超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域，为读者提高程序设计能力提供了很大的帮助。 　　 全书共分11章，主要以范例集的方式来讲述android的知识点，详细介绍了开发android的人机交互界面、android常用的开发控件、android手机收发短信等通信服务、开发android手机的自动服务功能和娱乐多媒体功能以及整合android与google强大的网络服务等内容。随书光盘中包括了所有范例的程序代码。 　　 《google android sdk开发范例大全(第3版)》继承前两版由浅入深的方式，范例总数由原先的160多个增加到了200多个，在用户交互界面、手机控件、交互式通信服务、手机自助服务、娱乐多媒体等方面均增加了相应的范例来介绍新的开发技术，特别是新增加了第11章来专门介绍html5技术在android移动设备里的应用，相信当下两个热门技术的交汇会碰撞出不一样的火花。 　　 《google android sdk开发范例大全(第3版)》内容由android的基础知识到实际开发应用，结构清晰、语言简洁，非常适合android的初学者和android的进阶程序开发者阅读参考。 目录 《google android sdk开发范例大全(第3版)》 第1章　了解、深入、动手做　1 1.1　红透半边天的android　2 1.2　本书目的及范例涵盖范围　3 1.3　如何阅读本书　4 1.4　使用本书范例　5 1.5　参考网站　6 第2章　android初体验　7 2.1　安装android sdk与adt/ddms　8 2.2　创建第一个android项目(hello android!)　11 2.3　android应用程序架构——从此开始　15 2.4　可视化的界面开发工具　18 2.5　部署应用程序到android手机　19 第3章　用户人机界面　22 3.1　更改与显示文字标签　23 3.2　更改手机窗口画面底色　24 3.3　更改textview文字颜色　26 3.4　置换textview文字　28 3.5　取得手机屏幕大小　29 3.6　样式化的定型对象　30 .3.7　简易的按钮事件　32 3.8　手机页面的转换　34 3.9　调用另一个activity　37 3.10　不同activity之间的数据传递　41 3.11　返回数据到前一个activity　44 3.12　具有交互功能的对话框　49 3.13　置换文字颜色的机关　51 3.14　控制不同的文字字体　52 3.15　如iphone拖动相片特效　54 3.16　自制计算器　56 3.17　关于(about)程序信息　58 3.18　程序加载中，请稍候　61 3.19　全屏幕以按钮重写　63 3.20　今晚到哪儿打牙祭　64 3.21　android变脸　67 3.22　打勾显示输入的密码　69 3.23　android多语系支持　71 3.24　判断手机操作系统版本是否允许运行程序　72 3.25　两个不同的程序彼此调用　75 3.26　指定安装应用程序迁移至sd卡　78 3.27　手机动态layout主题随手势物换迁移　79 第4章　史上超豪华的手机控件　84 4.1　edittext与textview共舞　85 4.2　设计具有背景图的按钮　86 4.3　给圣诞老人的信息　88 4.4　我同意条款　90 4.5　消费券采购列表　92 4.6　向左或向右　94 4.7　专业相框设计　96 4.8　自定义下拉菜单模式　99 4.9　动态添加/删除的spinner菜单　102 4.10　心爱小宝贝相片集　104 4.11　快速地搜索手机文件引擎　107 4.12　按钮也能随单击变换　109 4.13　具自动提示功能的菜单　110 4.14　数字及模拟小时钟设计　112 4.15　动态输入日期与时间　114 4.16　猜猜红桃a在哪儿　117 4.17　后台程序运行进度提示　121 4.18　动态文字排版　124 4.19　在activity里显示列表　128 4.20　以动态列表配置选项　130 4.21　查找程序根目录下所有文件　134 4.22　加载手机磁盘里的图片文件　137 4.23　动态放大缩小imageview里的图片　139 4.24　动态旋转图片　142 4.25　猜猜我在想什么　145 4
急急急！！！！怎么下载一个指定DIV里面的图片到本地呀！！！！！！！！！！！！！！
小第虚心求都，各位大哥帮忙解决下这个问题呀，我现在要实现的功能就是， 假设现在有一个字符串，或者是一个DIV里面的内容，我怎么样才能把这个里面内容属于图片IMG 的全部下载到本地上。。   很急。。。 谢谢大家的帮忙了。。
怎样实现模块间的参数传递?急急急!!!!!!!!!
怎样实现模块间的参数传递?急急急!!!!!!!!! Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiBase/html/delphi_20061208171655219.html 我现在做一个简易的登录器,由一个登录界面,及登录后的一些模块,但登录成功进入另一个模块后,我需要知道当前是谁登录的系统,好久都想不通,请高人指点,谢谢!...
java重新循环_Java中的while循环结构 用户重新输入的代码问题！急急急！！
Java中的while循环结构用户重新输入的代码问题！急急急！！需求描述：进入系统主菜单后,提示用户输入数字,然后根据选择进入相应的功能模块,如果用户输入错误,可以重复输入,直到输入正...Java中的while循环结构 用户重新输入的代码问题！急急急！！需求描述：进入系统主菜单后,提示用户输入数字,然后根据选择进入相应的功能模块,如果用户输入错误,可以重复输入,直到输入正确,执行相应的操作后退出...
Java

50,530

社区成员

85,610

社区内容

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

加载中

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

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

+ 用AI写文章