Buttony w js/html

pytanie zadane 8 maja 2017 w JavaScript przez Hardwell Dyskutant (8,980 p.)

Witam, mały problem a mianowicie mam zrobione przyciski (img załączone poniżej)

I chciał bym do jednego z tych przycisków (np o nazwie button 2) dodać taki "efekt" : https://www.w3schools.com/howto/howto_css_modals.asp

Jest to możliwe? Jeśli tak to jak tego dokonać ?? test

Pokaż 6 poprzednich komentarzy

komentarz 8 maja 2017 przez imklau Nałogowiec (42,090 p.)

tu z JS potrzebujesz tylko kilka linijek kodu by chwycić odpowiedni przycisk i kiedy już się go kliknie żeby dać mu inną klasę w CSS ;)
skoro znasz HTML to wiesz, że potrzebujesz przycisku (pokazałeś nawet jakieś przyciski) + do tego potrzebujesz jeszcze w HTML stworzyć diva np class="modal" czy "closed-modal" coś w tym stylu, któremu dasz przyciemnione tło w CSS i powiedzmy display: none. Możesz oczywiście do tego diva nawstawiać co Ci się tam podoba(tekst, obrazki, linki itp).
To będzie Twój modal, który będzie widoczny po kliknięciu przycisku ;)
Do tego musisz ustalić w CSS nową klasę, w której ustawisz display: block.
Albo bez nowej klasy dajesz w JS modal.style.display = "block"; pod warunkiem oczywiście, że zmienną nazwałeś modal ;)

komentarz 8 maja 2017 przez Hardwell Dyskutant (8,980 p.)

Eh, niestety próba na nic, pewnie źle coś robię :/

komentarz 8 maja 2017 przez imklau Nałogowiec (42,090 p.)

dlatego najlepiej jest, kiedy na forum nie wstawia się screenów a kod ;)
mógłbyś wstawić kod np na codepen i dodać link do pytania.
Łatwiej byłoby i mi to ogarnąć i Tobie ;)

komentarz 8 maja 2017 przez Hardwell Dyskutant (8,980 p.)


<!DOCTYPE HTML>
<html lang="pl">
<head>


	<meta charset="utf-8" />
	<title>Str</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	    <link rel="stylesheet" type="text/css" href="style/style.css">
                <link rel="stylesheet" type="text/css" href="style/sooperfish.css" media="screen">
		<link rel="stylesheet" type="text/css" href="style/sooperfish-theme-large.css" media="screen">
		<script type="text/javascript" src="style/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="style/jquery.easing-sooper.js"></script>
		<script type="text/javascript" src="style/jquery.sooperfish.js"></script>       
    <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
    });
	modal.style.display = "block";
    </script>
	

</head>
        

<body>

	<div id="container">
<div><center><img src="imag/logo.png"></center></div>
	
		<div id="navi">
		<div class="modal">
			<ul class="sf-menu" id="nav">
    <li class="current">
      <a href="">button 1</a>
 
    <li>
      <a href="">button 2</a>
   
    </li>
    <li>
      <a href="">button 3</a>
    </li>
 <li>
      <a href="#">button 4</a>
    </li>
    <li>
      <a href="">button 5</a>
    </li>
    <li>
      <a href="">button 6</a>
    </li>	
  </ul>

		
	</div>
        
</div>

            
</body>
</div>
   
</html>

CSS:

body {
        font-family: Comic Sans MS;
        background: url (../imag/tlo.jpg) repeat scroll 50% 10% transparent;
        background-repeat: no-repeat;
        background-position: center top;
        margin: auto auto auto auto;
        background-attachment: local;
        background-size: cover;
    }
	

	#container
	{
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	#logo
	{
		min-height: 100px;
		padding: 10px;
		background-color: black;
	}
	#navi
	{
		min-height: 60px;
		padding: 10px;
		background-color:
	}
	#nav1
	{
		float: left;
		width: 210px;
		min-height: 620px;
		padding: 20px;
		background-color: lightgray;
	}
	#content
	{
		float: left;
		padding: 20px;
		width: 660px;
		min-height: 620px;
	}
	#ad
	{
		float: right;
		width: 210px;
		min-height: 620px;
		padding: 20px;
		background-color: lightgray;
	}
	#footer
	{
		clear: both;
		color: black;
		text-align: center;
		padding: 20px;
		background-color: black;
	}	
    #modal
	{
	display: none;	
	display: block;
		
		
		
	}

komentarz 8 maja 2017 przez imklau Nałogowiec (42,090 p.)

margin: auto auto auto auto;

w takim razie chyba jednak tak perfect nie znasz CSS ;)
margin: auto byłoby poprawne, ale jeszcze nie widziałam czegoś takiego w body, jak już to margin: 0 po to by zlikwidować marginesy w przeglądarce, które z automatu są ustawiane.

Są też lepsze techniki niż float i clear:both.
No i jeśli znasz CSS to wiesz co znaczy display: block i display: none więc pewnie wiesz, że nie ma sensu dodawać tego do jednego elementu.

I widzę jQuery? mimo, że krucho u Ciebie z JS?
żeby zrobić taki modal to trzeba znać podstawy podstaw JS ;)

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci