我想用花哨的框代替基本的浏览器确认框。
我的默认确认工作如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="btn-remove" onclick="return confirm('Are you sure you would like to remove this item from the shopping cart?');" title="Remove This Item" href="http://google.com">Default</a></p>
我尝试如下替换它,
<p><a class="btn-remove" onclick="return getConfirm();" title="Remove This Item" href="http://google.com">Test</a></p>
<script type="text/javascript">
function getConfirm(){
jQuery.fancybox("#data");
$('#yes').on('click', function(){
console.log('I am clicked');
return true;
})
$('#no').on('click', function(){
return false;
})
return false;
}
</script>
function getConfirm(){
jQuery.fancybox("#data");
$('#yes').on('click', function(){
console.log('I am clicked');
return true;
})
$('#no').on('click', function(){
return false;
})
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<p><a class="btn-remove" onclick="return getConfirm();" title="Remove This Item" href="http://google.com">Test</a></p>
<div id="data" style="display:none">
<p>Are you sure want to colse?</p>
<p><div id="yes">Yes</div><div id="no">No</div></p>
</div>
但它没有向 href 返回 true,因此页面没有重定向。
最佳答案
您仅从点击处理程序返回 true
,而不是从 getConfirm
函数返回。
由于点击#yes
按钮稍后发生(异步),现在将任何东西返回到 anchor 已经太晚了,那艘船已经航行了,现在你必须重定向自己,就像 fancybox 对话框一样不会像 native 确认那样停止浏览器 UI 并等待响应。
function getConfirm(anchor){
jQuery.fancybox("#data");
$('#yes').on('click', function(){
window.location.href = anchor.href;
});
$('#no').on('click', function(){
// close fancybox
return false;
});
return false;
}
并确保您通过了此
<a class="btn-remove" onclick="return getConfirm(this);" ...
关于javascript - 用 jQuery 精美框替换默认浏览器确认,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34171946/