javascript - 用 jQuery 精美框替换默认浏览器确认

Question

我想用花哨的框代替基本的浏览器确认框。

我的默认确认工作如下:

<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，因此页面没有重定向。

Answer 1

您仅从点击处理程序返回 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);" ...