• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podpięcie modal box'a do przycisku

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
138 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

Witam, mam mały problem a mianowicie chciał bym podpiąć przycisk ( https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_fade )

 

pod przycisk który mam już na swojej stronie, a mianowicie:

Po prostu chciał bym żeby po naciśnięciu tego przycisku był taki sam efekt jak w linku, podpinam kawałek kodu:

 


<html>
    <head>
        <title></title>
        <link rel="icon" type="image/ico" href="favicon.ico" sizes="45x48">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">       
        <script src="skel.min.js"></script>
        <script src="init.js"></script>         
        <script src="https://use.fontawesome.com/a5e30dd034.js"></script>
        <link rel="stylesheet" href="style.css" >
    </head>
    <body class="loading">        
        <div id="wrapper">
            <video autoplay="1" loop="" id="player">
            <source src="music.mp4" type="video/mp4">
 <script>
                   var video = document.currentScript.parentElement;
                    video.volume = 0.03;
                </script>
            </video>     
            <div id="overlay"></div>
            <div id="main">               
                    <header id="header">
                      <span id="doc_time"></span>   
                        <h1></h1>
                        <p>&nbsp;&bull;&nbsp;<b>Witaj!</b>&nbsp;&bull;&nbsp;</p>                            
                        <nav>
                            <ul>  
                            <center>
                            <li><a href="index.html" class="fa fa-home" aria-hidden="true">Strona główna</a></li>
                            <li><a href="ranks.php" class="fa fa-list-ol" aria-hidden="true">Ranking</a></li>
                            <li><a href="faq.html" class="fa fa-info" aria-hidden="true">FAQ</a></li>
                            <li><a href="#" target="_blank" class="fa fa-facebook" aria-hidden="true">Facebook</a></li>
                            <li><a href="#" target="_blank" class="fa fa-snapchat-ghost" aria-hidden="true">Snapchat</a></li>
                            <li><a href="#" target="_blank" class="fa fa-instagram" aria-hidden="true">Instagram</a></li>
                            </center>
                            </ul>
                            <ul>
                                 <center> <div id="content">
                                   <center><h3><font color="pink">••</font></h3></center>
                                   <div>
                                   <span class="left"><b><font color="pink">•1•</font></b></span>
                                   <span class="right"><b><font color="pink">••</font></b></span>
                                   </div>
                                   <br />
                                   <p>
                             
                                   </p>
                                   <p align="right"><font color="pink">• <b>•</font></b></p>
 
                                   </div>
                                   </center>
                                   <br><br>
                                   <br><br>
                                   
                            <marquee aligt="center" scrollamount="100" width="540" style="width:540px;">&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;</marquee>
                            </ul>                     
                     
                            <ul>                  
                            <marquee aligt="center" scrollamount="100" width="540" style="width:540px;">&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;&nbsp;&bull;</marquee>
                            </ul> 
                         
                        </nav>
                             
                    </header>             
            </div>
                     
        </div>
 
 
 
 
    </body>
 
 
<script type="text/javascript">
 clock();
</script>
</script>
<script> 
document.onkeydown = function(e) { 
if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) {
} 
return false; 
}; 
</script>
</html>

Załączam zdjęcie z kawałkiem kodu tego przycisku: 

1 odpowiedź

0 głosów
odpowiedź 4 listopada 2017 przez xmentor Nałogowiec (49,520 p.)

Czemu dałeś aria-hidden=true dla linku?

JS-em toggluj jedynie klasę np. active, a animację zrób na transition.

Podobne pytania

0 głosów
1 odpowiedź 137 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)
0 głosów
1 odpowiedź 317 wizyt
pytanie zadane 16 września 2017 w HTML i CSS przez Sirtek Nowicjusz (170 p.)
0 głosów
1 odpowiedź 176 wizyt
pytanie zadane 3 grudnia 2017 w JavaScript przez memory158 Nowicjusz (160 p.)

93,187 zapytań

142,203 odpowiedzi

322,023 komentarzy

62,515 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2581p. - dia-Chann
  2. 2537p. - Łukasz Piwowar
  3. 2528p. - Łukasz Eckert
  4. 2514p. - CC PL
  5. 2476p. - Tomasz Bielak
  6. 2445p. - Łukasz Siedlecki
  7. 2443p. - rucin93
  8. 2201p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 1941p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1701p. - Michał Telesz
  15. 1580p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...