• 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

Object Storage Arubacloud
0 głosów
98 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,120 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,120 p.)
Nie żartuj. Po prostu zmień style dla hovera lub linka. Zależnie co tam masz.

Podobne pytania

0 głosów
1 odpowiedź 116 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)
0 głosów
1 odpowiedź 264 wizyt
pytanie zadane 14 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
0 głosów
1 odpowiedź 235 wizyt
pytanie zadane 3 stycznia 2018 w HTML i CSS przez kevin Mądrala (5,010 p.)

92,551 zapytań

141,393 odpowiedzi

319,523 komentarzy

61,936 pasjonatów

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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...