• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

POPUP - pomoc

VPS Starter Arubacloud
0 głosów
127 wizyt
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

0 głosów
odpowiedź 31 lipca 2016 przez xmentor Nałogowiec (49,520 p.)
el.onlick -> addEventListener

Dla addEventListener zastosuj zdarzenie "DOMContentLoaded"
0 głosów
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

komentarz 31 lipca 2016 przez RadomskiCoder Gaduła (3,980 p.)
o to ciekawe :) zapoznam się z tym bliżej

Podobne pytania

0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 10 lutego 2021 w JavaScript przez x_000 Obywatel (1,460 p.)
0 głosów
1 odpowiedź 91 wizyt
0 głosów
2 odpowiedzi 704 wizyt
pytanie zadane 14 lipca 2015 w JavaScript przez ssnake Obywatel (1,860 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...