点击a链接，使用javacript:void(0)，不跳转路径，弹出弹框
空链接 javacript:void(0);
在使用<a>标签时，经常会绑定其他事件比如onclick，这时我们会给<a>标签的href属性赋值为“#”，“javacript:;”，“javacript:void(0);”等等。
一、href="javacript:;" 用这个的话会出现浏览器访问“javascript:;”这个地址的现象，所以任何情况下都不建议使用；
二、href="javacript:void(0);" 表示点击这个链接后执行一条javascript语句：void(0); 这条语句表示什么也不做，是个空语句。当绑定了onclick()事件并且点击后，页面会停留在原地，不跳转页面；
三、href="#" 这个是HTML的链接用法，意思是跳转到页面顶部，如果想快速地返回到顶部，那么就用这个链接，这种用法叫做锚。
四、如果想使用a标签来对一个函数进行调用，有两种方式：
1)<a href="javascript:void(0);" onClick="hello();" >点我</a>
2)<a href="javascript:hello();" >点我</a>
所以应该在不同的场景应该选择合适的用法。
下面演示一下，点击a链接，不跳转页面，弹出弹框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewporta" content="width=device-width,initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./index.js"></script>
<style>
.contain{
width:100px;
height:20px;
line-height: 20px;
text-align: center;
border: 1px solid silver;
}
.contain a{
height:20px;
line-height: 20px;
text-decoration: none;
color:#000;
}
.m_modal{
position: fixed;
display: none;
left:0;
top:0;
width:100%;
height:800px;
z-index: 1;
background-color: rgba(0, 0, 0, 0.66);
}
.m_modal_one{
position: absolute;
left:25%;
top:10%;
width:50%;
height:500px;
background-color: #fff;
}
.m_modal_title{
width:100%;
height:50px;
background-color: springgreen;
}
.balck{
display: block;
width:30px;
height:50px;
line-height: 50px;
padding-left:95%;
font-size: 35px;
color:#fff;
}
</style>
</head>
<body>
<div class="contain">
<a href="javastript:void(0)" id="dtcon">动态</a>
</div>
<div class="m_modal" id="testone">
<div class="m_modal_one">
<div class="m_modal_title">
<span class="balck">×</span>
</div>
</div>
</div>
</body>
</html>
js文件：
$(function(){
$("#dtcon").click(function(){
$(".m_modal").css({
"display":"block"
})
})
$(".balck").click(function(){
$(".m_modal").css({
"display":"none"
})
})
})
点击动态，弹出弹框，点击× ，关闭弹框