Hallo,
ich habe eine Seite mit mehreren Buttons. Außerdem soll eine Infobox angezeigt werden, wenn auf einen bestimmten Link geklickt wird. Sowohl für die Buttons als auch für die Infobox habe ich ein Javascript, das am Ende der Seite eingebunden ist. Leider funktionieren nur die Buttons oder die Infobox, je nachdem, welcher Javascript-Code zuerst steht. Hier der Code:
Buttons:
Link:
Infobox:
Infobox CSS:
Code
- .modal {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgb(0,0,0);
- background-color: rgba(0,0,0,0.4);
- }
- .modalheader {
- height: 50px;
- background-color: RGB(0, 0, 130);
- }
- .modal_inhalt {
- background-color: #fefefe;
- margin: 15% auto;
- padding: 0;
- border: 1px solid #888;
- width: 80%;
- }
- .modaltext {
- padding: 20px;
- }
- .closemodal {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
- padding: 10px;
- }
- .closemodal:hover, .closemodal:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
- }
Javascript:
Code
- //"Hinzufügen"-Button
- document.querySelector('#hinzufuegenbutton').onclick = function() {
- if(document.querySelector('.filmelement') !== null) {
- $('#liste').load('listeneueneintraghinzufuegen.php', {
- hinzufuegenButtonGedrueckt: true
- });
- }
- }
- //"Entfernen"-Button
- $(document).on('click', '.entfernenbutton', function() {
- $('#liste').load('elementauslisteentfernen.php', {
- nummerElement: $(this).val()
- });
- });
- //Infobox "EAN"
- var eanmodal = document.querySelector("#eanmodal");
- document.querySelector("#eanlink").onclick = function() {
- eanmodal.style.display = "block";
- }
- document.querySelector("#eanmodalschliessen").onclick = function() {
- eanmodal.style.display = "none";
- }
- window.onclick = function(event) {
- if (event.target == eanmodal) {
- eanmodal.style.display = "none";
- }
- }
Wie bekomme ich Buttons und die Infobox zum Laufen?