[HTML & JavaScript] Ajutor

SolDaT. · December 16, 2017

Salut, am incercat sa fac o imitatie Advent Calendar pe site-ul meu(localhost), am pus Javascript dar e buton, si cand apas pe el apare, dar uitati cum se vede imaginea https://imgur.com/a/bMQB7

Cod pagina:

<!DOCTYPE html>
<html>
<head>
<style>
/* 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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>
</head>
<body>

<h2>Animated Modal with Header and Footer</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal<img src="https://www.rpg3.b-zone.ro/public/img/Advent/advent1.png" alt="1"></button>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var 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 modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

South HawKing · December 17, 2017

Salut, incearca sa anulezi acel fundal semi-transparent. Daca nu reusesti, cand o sa vin acasa te ajut, poti sa-mi lasi un PM sa nu uit.

xZeref · December 17, 2017

Fratimiu, tu spui ca ai incercat, dar acolo ai copiat codul de pe w3school, cel mai probabil. Incearca sa faci tu totul daca vrei sa te antrenezi. Tu ai incadrat poza intr-un buton, <button> default are un fundal si niste border setate de browserul tau. Incearca sa pui in css proprietati la buton in felul asta:

#myBtn {

background-color: transparent;

border: none;

}

Da un reply daca ai rezolvat.

EDIT: Mi-e greu sa cred ca ce vad acolo e facut de tine.

Edited December 17, 2017 by Wizard Zeref
Completare

SolDaT. · December 17, 2017

xZeref mersi mult, da, acel cod e copiat de pe w3school, multumesc mult.

T/C

South HawKing · December 17, 2017

@xZeref, i-am zis sa-si puna background transparent

Sign In

[HTML & JavaScript] Ajutor

Recommended Posts

SolDaT.

Link to comment

Share on other sites

South HawKing

Link to comment

Share on other sites

xZeref

Link to comment

Share on other sites

SolDaT.

xZeref mersi mult, da, acel cod e copiat de pe w3school, multumesc mult.

Link to comment

Share on other sites

South HawKing

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

SA-MP

RAGE-MP

Important Information