converting js comfirm box to lightbox

Question

I have a confirm() JS code and it's working just fine. Basically it's a small function that displays a textual message depending on the value I sent (1 or 2), pressing the ok button will take them to a pdf file. However, when I use it in firefox, it shows the "Prevent this page from showing additional content" dialog box and I can't format the text inside it.

I'm looking for guidance on how to convert it using lightbox/modal. My code:

    <script language="javascript">
function confdl(distext,fname) 
{
    if (distext == "1")
    {
    var answer = confirm("Message 1 goes here.")
    }
    else
    {
    var answer = confirm("Message 2 goes here.")        
    }
    if (answer){
        window.location = ("/path/to/pdf/file/"+fname);
    }
    else{

    }
}
</script>

<a  href="javascript:confdl('1','file1.pdf');">PDF 1</a>
<a  href="javascript:confdl('2','file2.pdf');">PDF 2</a>

Answer 1

There is nothing wrong with using confirm, however, when displayed more than once in google Chrome, it will show a checkbox to let the user prevent alerts from popping up. This is a feature from chrome to prevent unwanted popups from annoying or even malicious sites.

You should be just fine using confirm in your scenario, but you won't be able to remove that checkbox from the chrome popups.

If you are looking for a more modern solution, with full control over the message display, you should use modal dialogs for that. It looks way better. Since is your own HTML, you can style it any way you want with CSS.

If you want to speed things up, there are many libraries available. As an example, take a look how this library replaces the default javascript popup boxes with customizable modals: https://limonte.github.io/sweetalert2/