Cześć
Pytanie pewnie naiwne, ale...
w ramach czytania o windows próbowałam napisać modala, który pytałby o zgodę na zostawienie cookie i zostawiałby je. Coś napisałam i o ile działa to na live serwerze u mnie lokalnie to nie pokazuje się po wysłaniu plików na serwer sieci
Modal uruchamiany jest instrukcją:
<body onload="$('#cookieWarning').modal()" ></body>
Gdzie wypadałoby szukać przyczyny takiego zachowania?
Wszystko fajnie, lecz nie widzę w Twoim kodzie diva o id="cookieWarning". Powinien być w body ;)
Uwierz na słowo, że w wersji działającej - tej krótkiej - on jest POZA body i działa! Ja też nie mogłam uwierzyć a jednak! Poniżej kod, w zasadzie nic w nim nie ma a body jest puste! A jednak modal sie wyświetla. Zresztą też o tym myślałam, sprawdziłam kilka kombinacji 'w długiej' i nic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.min.css" rel="stylesheet">
<script type="text/javascript" src="./cookies.js"></script>
</head>
<body onload="$('#cookieWarning').modal()" ></body><!--onload="checkCookie()"!-->
<!-- Central Modal Medium Warning -->
<div class="modal fade" id="cookieWarning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Pytanie o pozwolenie na przechowywanie cookies</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Niniejsza strona może - ale nie musi - przechowywać w twojej przeglądarce
pliki cookies.Owe cookies nie mają specjalnego sensu;
prawdę powiedziawszy służą one li tylko mojemu treningowi.
Zawierają wyłącznie informacje o tym, że odwiedziłeś moją stronę; nie są to ciasteczka szpiegujące ani o charakterze komercyjnym.
Ponieważ szanuję twoje prawa możesz zgodzić się na ich pozostawienie naciskając "OK" lub też nie wyrazić takiej zgody naciskając "Cancel".
Uwaga: zależy to od ustawień przeglądarki, ale zazwyczaj ciasteczko zostanie usunięte najprawdopodobniej dopiero po wyłączeniu przeglądarki</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary" onClick ='checkCookie();' data-dismiss="modal" >OK </i></a>
<a type="button" class="btn btn-outline-warning waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Medium Warning-->
<!-- /Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>
```js
Sugerowałem się podanym przez Ciebie fragmentem kodu.
Powiedz jakie masz błędy w konsoli, sprawdź dev-tools (modyfikowany atrybut podświetla się), sprawdź przy użyciu tej metody czy w ogóle div#cookieWarning podlega jakimkolwiek modyfikacjom.
PS: Trzymanie elementów składowych strony poza tagiem <body> jest złą praktyką. Polecam przeniesienie tego elementu wewnątrz tagu <body>.
No byk jak się patrzy.. Zaraz po otwarciu body zamykasze je. Najpierw popraw htmla, potem będę rozkminial dalej co jest nie tak.
Niezupełnie ale dzięki za zainteresowanie. Powyżej ta strona w aktualnie wyświetlanej wersji. Nie ma różnicy gdzie jest ciało modala - czy w body czy poza, choć nie ulega kwestii, że umieszczeni poza jest nie na miejscu. Nie ukrywam, że to co tam zobaczycie jest oparte o jakieś przykłady z sieci.
Natomiast faktycznie - w devtools ten modal jest szary, więc tu coś może nie stykać. Ale napisze jeszcze raz - to hula na live serverze jak powinno.
Uwaga, pod tym linkiem jest też jakiś nie mój kod, pewnie reklamy od właściciela hosta.
Błędów (czerwonych) nie ma. Sa tylko ostrzeżenia związane ze śledzeniem itd.
Zapytałem o opinię adminów hosta również,
Axelbest: to co komentowałeś to wersja ćwiczebna. Powyżej link do docelowej
Nie ma różnicy? No toz mowie ze jest, bo umieszczanie jakiegoś diva (lub czegokolwiek co nie powinno być w headzie) poza body jest złe. Jest złe, nie dlatego że ja tak pisze, tylko taka jest składnia, a przeglądarki mimo że mogą taka stronę wyświetlic, wcale nie oznacza że kod jest poprawny.
Sprawdź tak:
$(document).ready(function(){
$('#cookieWarning').modal();
});
http://learn.jquery.com/about-jquery/how-jquery-works/
U mnie na chromie bardzo długo czeka na pobranie jakichś elementów strony (chyba reklamy), przez co wywołanie onload może się sporo opóźnić.
Dodatkowo strasznie sypie statusami 404 w konsoli.
Problem jest tego typu, że plik robot.js nadpisuje zdarzenie onload zawarte w body -> onload i to właśnie dlatego modal się nie wyświetla. Jego wyświetlanie jest nadpisane.
Rozwiązanie @Seti87 rozwiąże Twój problem.
Ignorowanie zaleceń odnośnie struktury HTML może spowodować problemy w przyszłości (tak zwane złe praktyki), więc nie radzę ich ignorować.
Dzięki, działa
Co do kodu poza body - no cóż, wstrzeliło się coś na szybko, żeby zobaczyć czy modal działa czy nie i tak już poszło. Na docelowej stronie jest właściwa lokalizacja.
Natomiast przy okazji pytanie - czy takie zachowanie ze strony robot.js jest typowe? Zastanawiam się, czy nie zwrócić na to uwagi adminowi portalu, bo IMHO jak chce wlepić reklamy to niech wlepia, ale niech nie nadpisuje tego co jest w kodzie.
A błędy 404 dotyczą chyba właśnie reklam, w ogólności strona ma co zaplanowane.
Zapewne administracja ma w regulaminie zapis odnośnie sposobu dodawania reklam, więc nie wiem czy da się coś z tym zrobić (miałem podobną sytuację z cba.pl). Zaleca się stosowanie addEventListener dla takich operacji. Nie powodują one nadpisania zdarzenia, lecz dodają się jako kolejny handler.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>