Efektowny przycisk w html

pytanie zadane 3 września 2017 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

Witam, będę się streszczał bo nie ma co się rozpisywać ;). A więc chciał bym żeby po przyciśnięciu przycisku "Graj" na stronie http://aktualizacjetesty.5v.pl/ robiło się coś takiego jak po przyciśnięciu przycisku "SERWERY" Na stronie http://thesimbolgame-glowna.5v.pl/ Ktoś pomoże?

3 odpowiedzi

odpowiedź 3 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Chodzi o to wyskakujące okno?

Szukaj pod hasłem Modal Dialog Box.

Pokaż 6 poprzednich komentarzy

komentarz 3 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Pokaż kod...

komentarz 3 września 2017 przez Hardwell Dyskutant (8,980 p.)


<html>
	<head>
	    <title>Pantasia - Strona główna</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>Pantasia - Game</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="hp" class="fa fa-gamepad" aria-hidden="true">Graj</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="kontakt.html" class="fa fa-phone" aria-hidden="true">Kontakt</a></li>
                            <li><a href="https://web.facebook.com/PantasiaTeam-834476886716205/?_rdc=1&_rdr" target="_blank" class="fa fa-facebook" aria-hidden="true">Facebook</a></li>
					        <li><a href="http://forum-pantasia.5v.pl/" target="_blank" class="fa fa-users" aria-hidden="true">Forum</a></li>
                            </center>
							</ul>
							<ul>
							     <center> <div id="content">
                                   <center><h3><font color="pink">•[Nowości]•</font></h3></center>
                                   <div>
                                   <span class="left"><b><font color="pink">•News #1•</font></b></span>
                                   <span class="right"><b><font color="pink">•00:00 00.00.0000•</font></b></span>
                                   </div>
                                   <br />
                                   <p>
                                   Newsy
                                   </p>
                                   <p align="right"><font color="pink">•Zespół <b>Pantasia•</font></b></p>

                                   </div>
								   </center>
							<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>						
							<p>Copyright © PantasiaTeam - 2017 |<font color="lime"> By Hardwell</font> | <font color="lime">Gilu </font>| <font color="lime">AggeloSF</font></p>
							<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>

komentarz 3 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

No i gdzie dodałeś, to co Ci pisałem?

Tu w ogóle nie ma żadnego modala, więc jak ma to działać?

komentarz 3 września 2017 przez Hardwell Dyskutant (8,980 p.)

Usunąłem go bo po wstawieniu go namieszał mi na stronie

już daję


<html>
	<head>
	    <title>Pantasia - Strona główna</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" >
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Pantasia - Game</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="hp" class="fa fa-gamepad" aria-hidden="true">Graj</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="kontakt.html" class="fa fa-phone" aria-hidden="true">Kontakt</a></li>
                            <li><a href="https://web.facebook.com/PantasiaTeam-834476886716205/?_rdc=1&_rdr" target="_blank" class="fa fa-facebook" aria-hidden="true">Facebook</a></li>
					        <li><a href="http://forum-pantasia.5v.pl/" target="_blank" class="fa fa-users" aria-hidden="true">Forum</a></li>
                            </center>
							</ul>
							<ul>
							     <center> <div id="content">
                                   <center><h3><font color="pink">•[Nowości]•</font></h3></center>
                                   <div>
                                   <span class="left"><b><font color="pink">•News #1•</font></b></span>
                                   <span class="right"><b><font color="pink">•00:00 00.00.0000•</font></b></span>
                                   </div>
                                   <br />
                                   <p>
                                   Newsy
                                   </p>
                                   <p align="right"><font color="pink">•Zespół <b>Pantasia•</font></b></p>

                                   </div>
								   </center>
							<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>						
							<p>Copyright © PantasiaTeam - 2017 |<font color="lime"> By Hardwell</font> | <font color="lime">Gilu </font>| <font color="lime">AggeloSF</font></p>
							<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>
		
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


	</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>

komentarz 3 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Wciąż, co ma działać, skoro nie ma żadnego modala?

Masz tam dokładnie napisane:

<!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Przeanalizuj komentarze. Wklej to sobie na stronę i zobacz czy Ci działa. Potem spróbuj to dopasować do swojego projektu. Kluczowe będą odpowiednie ID i adrybuty data-, bo do nich odnosi się zapewne javascript.