为特定目录配置下载确认页面

Question

我的页面中有链接，上面写着，

<a href='www.mysite.com/ebooks/mybook.pdf'>Mybook</a>

点击后应该会出现下载确认页面

Answer 1

这是一个快速演示如何做到这一点

HTML

<a class="links" href='www.mysite.com/ebooks/mybook.pdf'>Mybook</a>
<br />
<a class="links" href='www.mysite.com/ebooks/mybook.pdf'>Mybook</a>
<br />
<a class="links" href='www.mysite.com/ebooks/mybook.pdf'>Mybook</a>
<br />
<a class="links" href='www.mysite.com/ebooks/mybook.pdf'>Mybook</a>
<br />
<a class="links" href='www.mysite.com/ebooks/mybook.pdf'>Mybook</a>

<div id="modal">
    <h3>You are going to download mybook.pdf. Are you sure?</h3>
    <button id="yes">Yes</button>
    <button id="no">No</button>
</div>

CSS

#modal {
    display: none;
    margin: 80px;
    padding: 20px;
    background: #E4E4E4;
    text-align: center;
    color: #2E3B6F;
}

#modal button {
    margin: 0 5px;
}

JS

$(function(){
    var link = '';
    $(".links").click(function(e){
        $("#modal").hide().show("slow");
        link = $(this).attr("href");    

        return false;
    });

    $("#yes").click(function(e){  
      if(link) window.location.href = link;
    });

    $("#no").click(function(e){
        $("#modal").hide("slow");
    });
});

现场演示：http://codepen.io/anon/pen/pjrzvB

我使用了 jQuery，但您也可以在没有 jQuery 的情况下实现相同的功能。

根据您的评论进行更新。 2015 年 11 月 10 日