POPUP - pomoc - Forum Pasja Informatyki

pytanie zadane 31 lipca 2016 w JavaScript przez Albert Fijałkowski Użytkownik (590 p.)

Witam pomoże mi ktoś przerobić tego popup'a, żeby był onload


// 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";
    }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    padding-top: 300px; /* 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.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	color: white;
    background-color: #1a1919;
    margin: auto;
    padding: 20px;
    width: 30%;
	text-align: center;
}

/* 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;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>


<!-- Trigger/Open The Modal -->
<button id="myBtn">ORDER</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">X</span>
    <p>GG - 3445244534<br/>FACEBOOK</p>
  </div>

</div>

<script src="popup.js"></script>

</body>
</html>

2 odpowiedzi

odpowiedź 31 lipca 2016 przez xmentor Nałogowiec (49,520 p.)

odpowiedź 31 lipca 2016 przez RadomskiCoder Gaduła (3,980 p.)

Postaraj się sam to zrobić, sprawa prosta. Zamykasz to co ma się pokazać w funkcji i wywołujesz ją np w body onload. Zerknij na to :) http://www.w3schools.com/jsref/event_onload.asp