HTML a href mit Modal-call

[xep22]

hallo, ich habe einen normalen link womit man einen download startet.

<a href="download.file" download="datei.file">Download</a>

jetzt will ich aber noch dass mit dem klick mein Bootstrap modal geöffnet wird, habe es einfach mal so probiert, doch jetzt kommt nur das modal und der Download startet nicht mehr.

<a href="download.file" download="datei.file" data-toggle="modal" data-target="#Modal">Download</a>

wie geht das richtig ?

 

[ayngush]

Du musst dir ein eigenes kleines Javascript schreiben.
Das Data-Attribut data-toggle="modal" fängt einfach das Click-Event auf das A-Element ab, beendet es und führt danach das show-Event auf das Modal-Element aus. Das musst Du auch tun aber ohne das eigentliche Click-Event zu beenden.

Also in etwa so:

$('#id-download-link').click(function() {
    $('#id-modal').modal('show');
});

Das was data-toggle macht schaut (stark vereinfacht) in etwa so aus:

$('[data-toggle="modal"]').click(function(e) {
    e.preventDefault();
    $($(this).data('target')).modal('show');
});

 

[xep22]

ah danke, aber was wenn ich mehrere download-links habe ? id ist ja nur einmalig...

 

[j0hnwayn3]

Hast du mehrere <a> Tags die das gleiche Modal öffnen sollen oder mit einem Anchor mehrere Downloads und das Modal öffnen?

 

[xep22]

ja mehrere <a> tags wo das gleiche kommen soll.

 

[mastaqz]

allen <a> eine class geben, mit querySelectorAll() alle selecten und mit einer forEach() allen per addEventListener den handler des modals zuweisen

 

[xep22]

klingt kompliziert, kann ich nicht einfach bei dem JS das von id zu class irgendwie ändern ?

$('#id-download-link').click(function() {
    $('#id-modal').modal('show');
});

 

[ayngush]

Klar... Klassennamen im Selektor werden mit der Punkt-Notation angegeben.

$('.download-links').click(function() {
    $('#id-modal').modal('show');
});