js点击弹窗练习(modal/模态框)

要求：
点击按钮，弹出窗口，点击关闭按钮关闭窗口

要点：
1、使用按钮的click方法触发js函数
2、js函数中对隐藏的modal设置dispaly为blcok
3、点击关闭按钮，通过click方法触发js函数
4、js函数中对modal设置display为none

示例代码1：

	
		"utf-8" />
		
		"stylesheet" type="text/css" href="css/index.css"/>
	
	
		
"contanier">
			
"content" id="modal">				
				
"modal-content" id="modal-content">
					
modal练习
					"close">×;
				
				
				点击
			
		
	

示例代码2：

"footer-bar">
			
"tel:13874106368">"./img/电话.png" alt="">
			
"https://map.baidu.com/poi/%E6%B9%96%E5%8D%97%E6%98%9F%E9%83%BD%E7%89%A9%E6%B5%81%E6%9C%89%E9%99%90%E8%B4%A3%E4%BB%BB%E5%85%AC%E5%8F%B8/@12615872.585,3106051.3,19z?uid=c95d7ad02713e21d626858d8&ugc_type=3&ugc_ver=1&device_ratio=2&compat=1&querytype=detailConInfo&da_src=shareurl">"./img/定位.png" alt="">
			
"http://www.yxxdwl.com/gsjj/">"./img/网站.png" alt="">
			
"javascript:void(0)" οnclick="show('xcx')">"./img/商城.png" alt="">
			
			
"xcx">
				"./img/xcx.png" alt="">
				"javascript:void(0)" οnclick="hide('xcx')" id="xcx-btn">关闭
			
			
"javascript:void(0)" οnclick="show('gzh')">"./img/微信.png" alt="">
			
"gzh">
				"./img/gzh.png" alt="">
				"javascript:void(0)" οnclick="hide('gzh')" id="gzh-btn">关闭
			
		

js代码

function show(id){
	var el = document.getElementById(id)
	el.style.display = "block";
}

function hide(id){
	var el = document.getElementById(id)
	el.style.display = "none";
	
}

两个方法的区别在于：
1、一个使用button按钮触发，一个使用a标签触发
2、其中a标签中使用onclick指向明确的函数，并传入css选择器作为参数
3、第二种方法的js代码简洁度要高，代码可以复用