本文介绍如何在点击超链接时触发弹窗并阻止页面跳转。通过原生JS函数返回false或jQuery绑定click事件返回false,均可实现点击后打开对话框且不执行href链接跳转的效果。
JS点击超链接触发弹窗并阻止跳转的两种实现方式
代码如下:
<script>
/*关于弹窗链接的问题
* 2014-04-24
*/1:超链接a onclick 弹窗后如何使超链接a失效
//js解决方案
function arts(sourceobj){
var url = $(sourceobj).attr("href");
art.dialog.open(url, {title: 'title',width: 400, height: 300});
return false;
}
//jquery解决方案
$(document).ready(function(){
$('#aaa').click( function () {
var url = $(this).attr("href");
art.dialog.open(url, {title: 'title',width: 400, height: 300});
return false;
});
});
</script> 代码如下:
<a href="http://www.baidu.com" onclick="arts(this);return false" >触发弹窗</a>
<a href="http://www.baidu.com" id="aaa" >触发弹窗</a>
//2:ajax提交时避免将按钮置于submit上