Seneste forumindlæg
Køb / Salg
 * Uofficiel Black/White liste V2
Login / opret bruger

Forum \ Programmering og webdesign \ Hjemmeside design

Hvordan kan jeg designe selve boksen jeg klikker p...

Af Giga Supporter McNewmann | 16-05-2019 10:59 | 337 visninger | 3 svar, hop til seneste
https://www.w3schools.com[...] - Her er linket til den guide jeg følger. Jeg vil gerne kunne ændre selve knappen, altså gøre den større?? <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;}/* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 5px solid orange; width: 80%;}/* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}.close:hover,.close:focus { color: #000; text-decoration: none; cursor: pointer;}</style></head><body><h2>Personale information</h2><!-- Trigger/Open The Modal --><button id="myBtn">Benjamin Info:</button><!-- The Modal --><div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Benjamin er klasselærer i hold 3, og IT-ansvarlig<br><b>Email adresse:</b> [email protected]</p> </div></div><script>// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block";}// When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }}</script></body></html>
--
Spec: i7 3770k - 12GB 1600Mhz DDR3 - GTX1070 G1 - 80+Bronze 620W - Z77MX-D3H - W-64bit Soundblazter z soundcard.
#1
Azakiel
Skribent
16-05-2019 11:03

Rapporter til Admin
jesus, brug en code dump ala codeshare til at dele din kode. Du kan rimelig hurtigt style knapper enten ved at bruge button som element i din CSS, eller give den en class. quick'n'dirty eksempel: button{ -webkit-appearance: none; outline: 0; border: 0; padding: 20px 30px; background-color: #79b6ea; color: #FFF; cursor: pointer; }
--
Veni, Vidi, Vici. dimidium facti qui coepit habet faber est quisque fortunae suae
#2
McNewmann
Giga Supporter
16-05-2019 15:23

Rapporter til Admin
#1 beklager. https://codeshare.io[...] Nu har jeg lavet noget jeg synes ser ganske fint ud. Det er et informations modal til de enkelte medarbejdere. Nu vil jeg gerne kunne tilføje flere af dem, end bare min egen. Hvordan tilføjer jeg flere modal til koden?
--
Spec: i7 3770k - 12GB 1600Mhz DDR3 - GTX1070 G1 - 80+Bronze 620W - Z77MX-D3H - W-64bit Soundblazter z soundcard.
#3
McNewmann
Ultra Supporter
16-05-2019 15:40

Rapporter til Admin
er måske i virkeligheden nemmere hvis jeg linker hertil: https://www.w3schools.com[...] Den buks med Benjamin Nymann, jeg vil gerne have en magen til bare med andet navn og info når man klikker på den.
--
Spec: i7 3770k - 12GB 1600Mhz DDR3 - GTX1070 G1 - 80+Bronze 620W - Z77MX-D3H - W-64bit Soundblazter z soundcard.

Opret svar til indlægget: Hvordan kan jeg designe selve boksen jeg klikker p...

Grundet øget spam aktivitet fra udlandet, er det desværre ikke muligt for dig, at oprette svar som gæst.

Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.

Opret bruger | Login
NYHEDSBREV
Afstemning