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日

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

1 个答案: