html实现点击弹窗效果

目的

实现一个echarts图点击弹窗弹出的效果，实现点击后，新的弹窗的图表居于最前。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.js"></script>
		<style>
			.chart-close-btn {
			  position: absolute;
			  top: 0;
			  right: 0;
			  width: 30px;
			  height: 30px;
			  background-image: url(close-icon.png); // 設置關閉圖標
			  background-repeat: no-repeat;
			  background-position: center;
			  cursor: pointer;
			}
			.close {
			  color: #aaa;
			  float: right;
			  font-size: 28px;
			  font-weight: bold;
			}
			.close {
			  color: #aaaaaa;
			  float: right;
			  font-size: 28px;
			  font-weight: bold;
			  top:-300px;
			  position: relative;
			  right:250px;
			}
			
			.close:hover,
			.close:focus {
			  color: #000000;
			  text-decoration: none;
			  cursor: pointer;
			}
 
	
			
		
 
		</style>
	
	</head>
	<body>
		<!-- 在这里放置一个 div 元素作为容器（必须指定宽度和高度） -->
		<div id="chart" style="width: 600px; height: 400px;"></div>
		
		 
			
			<div id="main">
				 <span class="close">&times;</span>
				 <div id="chart2" style="width: 800px; height: 400px;"></div>
			</div>
	
	
	
			
		
		<script>
			
			var option = {
				 backgroundColor: '#fff',// 將圖表背景色設置為不透明的白色
			    xAxis: {
			        type: 'category',
			        data: ['Apple', 'Banana', 'Orange', 'Grape', 'Kiwi', 'Apricot']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [20, 50, 30, 80, 45, 70],
			        type: 'bar',
			        itemStyle: {
			            // 注意：沒有 hover 样式时保证 normal 样式存在，否则会出现 tooltip 显示不正常的问题
			            emphasis: {
			                barBorderWidth: 1,
			                shadowBlur: 10,
			                shadowOffsetX: 0,
			                shadowOffsetY: 0,
			                shadowColor: 'rgba(0,0,0,0.5)'
			            },
			            normal: {
			                color: function (params) {
			                    var colorList = [
			                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
			                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
			                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
			                    ];
			                    return colorList[params.dataIndex]
			                }
			            }
			        }
			    }],
			    tooltip: {
			        trigger: 'axis',  // 指定觸發類型，這裏指定為數軸類型
			        axisPointer: {    
			            type: 'shadow' // 顯示陰影線，表示數值區間對應柱子的數值范圍
			        }
			    }
			};
			// 使用 ECharts 绘制图表
			var chartDom = document.getElementById('chart');
			var chartDom2 = document.getElementById('chart2');
			// 設置絕對定位位置
			chartDom2.style.position = 'absolute';
			chartDom2.style.top = '100px';    // 距離頂部 100 像素
			chartDom2.style.left = '200px';   // 距離左側 200 像素
			
			var myChart = echarts.init(chartDom);
			myChart.setOption(option);
			var myChart2 = echarts.init(chartDom2);
			myChart2.setOption(option);
			var main = document.getElementById('main');
			main.style.display = "none";
			chartDom.addEventListener('click', function() {
                console.log('您單擊了 div 元素！');
               
			    //chartDom.style.display = "none";
				//chartDom2.style.display = "block";
				main.style.display = "block";
				
});
        
        var span = document.getElementsByClassName("close")[0];
		// 當用戶點擊關閉按鈕時，關閉彈窗
		span.onclick = function() {
		console.log("觸發關閉事件")
		 main.style.display = "none"
		}
            
		
		</script>
	</body>
</html>复制

标签

html实现点击弹窗效果

目的

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

VUE中引入外部jquery.min.js文件

vue-echarts实现多功能图表

echarts参数详细介绍

Echarts图表中formatter的用法

Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）

vue中使用echarts（含自适应监听及移除）

echarts 图例组件legend配置

基于echarts实现地图撒点、飞线等功能

vue开发图表echarts基本使用

前端哥

基于javaweb mysql的ssm汽车出租管理系统(java ssm jsp jquery mysql)

基于Javaweb的网上购物商城系统源码,用jsp servlet jQuery

无涯教程-jQuery - Ajaxcomplete方法函数

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

VUE中引入外部jquery.min.js文件

jquery和php json字符串转数组对象和数组对象转json字符串

vue-echarts实现多功能图表

echarts参数详细介绍

Echarts图表中formatter的用法

Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）

1
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

2
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

3
移动端css布局大全

2024-02-06 15:02:421000

4
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

5
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

6
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

7
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

8
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

9
尚硅谷css3笔记

2024-02-13 10:02:44998

10
如何利用浏览器测试跨域

2024-02-11 10:02:28998

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="echarts.js"></script>
	<style>
	.chart-close-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background-image: url(close-icon.png); // 設置關閉圖標
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	}
	.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	}
	.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	top:-300px;
	position: relative;
	right:250px;
	}

	.close:hover,
	.close:focus {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	}





	</style>

	</head>
	<body>
	<!-- 在这里放置一个 div 元素作为容器（必须指定宽度和高度） -->
	<div id="chart" style="width: 600px; height: 400px;"></div>



	<div id="main">
	<span class="close">×</span>
	<div id="chart2" style="width: 800px; height: 400px;"></div>
	</div>





	<script>

	var option = {
	backgroundColor: '#fff',// 將圖表背景色設置為不透明的白色
	xAxis: {
	type: 'category',
	data: ['Apple', 'Banana', 'Orange', 'Grape', 'Kiwi', 'Apricot']
	},
	yAxis: {
	type: 'value'
	},
	series: [{
	data: [20, 50, 30, 80, 45, 70],
	type: 'bar',
	itemStyle: {
	// 注意：沒有 hover 样式时保证 normal 样式存在，否则会出现 tooltip 显示不正常的问题
	emphasis: {
	barBorderWidth: 1,
	shadowBlur: 10,
	shadowOffsetX: 0,
	shadowOffsetY: 0,
	shadowColor: 'rgba(0,0,0,0.5)'
	},
	normal: {
	color: function (params) {
	var colorList = [
	'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
	'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
	'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
	];
	return colorList[params.dataIndex]
	}
	}
	}
	}],
	tooltip: {
	trigger: 'axis', // 指定觸發類型，這裏指定為數軸類型
	axisPointer: {
	type: 'shadow' // 顯示陰影線，表示數值區間對應柱子的數值范圍
	}
	}
	};
	// 使用 ECharts 绘制图表
	var chartDom = document.getElementById('chart');
	var chartDom2 = document.getElementById('chart2');
	// 設置絕對定位位置
	chartDom2.style.position = 'absolute';
	chartDom2.style.top = '100px'; // 距離頂部 100 像素
	chartDom2.style.left = '200px'; // 距離左側 200 像素

	var myChart = echarts.init(chartDom);
	myChart.setOption(option);
	var myChart2 = echarts.init(chartDom2);
	myChart2.setOption(option);
	var main = document.getElementById('main');
	main.style.display = "none";
	chartDom.addEventListener('click', function() {
	console.log('您單擊了 div 元素！');

	//chartDom.style.display = "none";
	//chartDom2.style.display = "block";
	main.style.display = "block";

	});

	var span = document.getElementsByClassName("close")[0];
	// 當用戶點擊關閉按鈕時，關閉彈窗
	span.onclick = function() {
	console.log("觸發關閉事件")
	main.style.display = "none"
	}


	</script>
	</body>
	</html>

html实现点击弹窗效果

目的

微信扫一扫：分享