js点击弹窗练习(modal/模态框)
要求：
点击按钮，弹出窗口，点击关闭按钮关闭窗口
要点：
1、使用按钮的click方法触发js函数
2、js函数中对隐藏的modal设置dispaly为blcok
3、点击关闭按钮，通过click方法触发js函数
4、js函数中对modal设置display为none
示例代码1：
"utf-8" />modal练习 "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代码简洁度要高，代码可以复用
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！