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

Podpięcie modal box'a pod przycisk

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
136 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 pablop76 VIP (123,540 p.)
Witam. Zamiast napisu w buttonie wstaw img.
komentarz 4 listopada 2017 przez Hardwell Dyskutant (8,980 p.)
Też nad tym myślałem, ale niestety nie będe miał oczekiwanego efektu, ponieważ kiedy najeżdżam kursorem na te przyciski, zmieniają kolor na niebieski
komentarz 4 listopada 2017 przez pablop76 VIP (123,540 p.)
Nie żartuj. Po prostu zmień style dla hovera lub linka. Zależnie co tam masz.

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ź 302 wizyt
pytanie zadane 14 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
0 głosów
1 odpowiedź 272 wizyt
pytanie zadane 3 stycznia 2018 w HTML i CSS przez kevin Mądrala (5,010 p.)

93,158 zapytań

142,171 odpowiedzi

321,881 komentarzy

62,487 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 224p. - Marcin Putra
  2. 224p. - nidomika
  3. 223p. - dia-Chann
  4. 221p. - ssynowiec
  5. 217p. - Mikbac
  6. 216p. - CC PL
  7. 215p. - Łukasz Piwowar
  8. 212p. - zmmz89
  9. 210p. - Adrian Wieprzkowicz
  10. 208p. - rafalszastok
  11. 206p. - Michal Drewniak
  12. 204p. - Łukasz Eckert
  13. 202p. - rucin93
  14. 200p. - robwarsz
  15. 198p. - TheLukaszNs
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!

...