-4

I have links in my page which says,

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

when i click on it, there should be some download confirmation page.

Shaym Murmu
  • 3
  • 1
  • 7

1 Answers1

0

Here is a quick demo how to do that

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");
    });
});

Live Demo: http://codepen.io/anon/pen/pjrzvB

I used jQuery but you can also made same functionality without jQuery.

Update based on your comment. 10.11.2015

Ruben Yeghikyan
  • 497
  • 2
  • 6
  • 19
  • Thanks @ruben, but what should be done in case of large no. of files on a particular directory. Like on my webserver 'www.mysite.com/ebooks/' has 100's of ebooks. Is there any way that can make this happen for anyone who clicks for pdfs file on that particular directory and it ask for confirmation . The main problem is that I've all those pdf's link on my blog(blogger) and i've hosted those all pdfs on my separate webserver i.e www.mysite.com/ebooks/ .This is why its really challenging for me. – Shaym Murmu Oct 11 '15 at 03:50
  • updated check it out :) – Ruben Yeghikyan Oct 11 '15 at 19:58