JS oder HTML Problem

07/21/2020 08:47 OemG#1
Hab das Problem gelöst.
Dachte ganze Zeit das ich das beim script Modal2 machen muss damit's funktioniert, dabei lags am btn2.

Code:
		// Get the modal
		var modal = document.getElementById("myModal");

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

		// Get the <span> element that closes the modal
		var span = document.getElementsByClassName("close")[0];

		// When the user clicks on the button, open the modal
		btn.onclick = function() {
		  modal.style.display = "block";
		}
		btn2.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";
		  }

07/21/2020 10:01 Legendary#2
#moved
07/21/2020 10:04 Devsome#3
Zeig uns doch dann mal die Code den du versuchst der Fehler verursacht, dann können wir dir besser helfen (:
07/21/2020 10:14 OemG#4
Quote:
Originally Posted by Devsome View Post
Zeig uns doch dann mal die Code den du versuchst der Fehler verursacht, dann können wir dir besser helfen (:

Quote:
Originally Posted by OemG View Post
Link zum Code
[Only registered and activated users can see links. Click Here To Register...]
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* 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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

<h2>Modal Example</h2>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </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>
Reicht das hier nicht aus? :D
07/21/2020 10:31 False#5
Quote:
Originally Posted by OemG View Post
Reicht das hier nicht aus? :D
Nicht wirklich der von dir verlinkte Code funktioniert ja für 1 Button.
Zeig mal dein Code wo du versucht hast 2 Modals zu öffnen.

Verstehst du den was der Code macht oder hast du den einfach nur kopiert?
07/21/2020 10:38 OemG#6
Quote:
Originally Posted by OemG View Post
Hey epvp,

ich programmier momentan eine art Knowledge base und benutze dafür html, css und ein wenig js. Ich möchte nun ein pop up modal fenster einbauen und habe eine W3Schools Seite als Hilfestellung genutzt.
Link zum Code
[Only registered and activated users can see links. Click Here To Register...]
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* 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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

<h2>Modal Example</h2>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </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>
Ich hab jetzt das Problem das ich mit diesem Code nur 1 pop up Fenster erstellen kann. Wenn ich versuche da was umzuschreiben, damit ich mehrere Pop up Fenster bekomme funktioniert es leider nicht.

Wäre nice wenn mir da jemand sagen könnte woran es liegt :handsdown::D

Grüße,

OemG
Quote:
Originally Posted by False View Post
Nicht wirklich der von dir verlinkte Code funktioniert ja für 1 Button.
Zeig mal dein Code wo du versucht hast 2 Modals zu öffnen.

Verstehst du den was der Code macht oder hast du den einfach nur kopiert?
jaein, verstehe nur halb was der js code macht. Ich hab halt sachen probiert wie
<button id="myBtn">xxx</button> umändern zu
<button id="myBtn2">xxx</button> und dazu im js script
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");

Hab halt rum experimentiert ohne erfolg.
07/21/2020 18:42 lnqlorlouz#7
Quote:
Originally Posted by OemG View Post
jaein, verstehe nur halb was der js code macht. Ich hab halt sachen probiert wie
<button id="myBtn">xxx</button> umändern zu
<button id="myBtn2">xxx</button> und dazu im js script
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");

Hab halt rum experimentiert ohne erfolg.
Na so wird das nichts. Da ich gerade Langeweile hatte, hier mein Code.
Btw. es ist nur eine Möglichkeit es zu machen. Es ist auch nicht eingebaut, dass wenn man neben das Modal klickt, es sich automatisch schließt.
HTML Code:
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <style>
        body {
            font-family: verdana;
        }

        button {
            border: none;
            background: #ddd;
            padding: 10px;
            display: block;
            margin: 50px auto;
            cursor: pointer;
        }

        .modal h1 {
            font-size: 20px;
        }

        .modal button {
            margin: 0px auto;
            margin-top: 20px;
        }

        .modal {
            position: fixed;
            top: 0px;
            pointer-events: none;
            left: 0px;
            background: rgba(51, 51, 51, 0.9);
            width: 100vw;
            height: 100vh;
            z-index: 100;
            opacity: 0;
            transition: 0.3s;
        }

        .modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal.active .box {
            top: 50%;
        }

        .modal#success h1 {
            font-size: 1.5em;
        }

        .modal .close {
            position: absolute;
            top: -20px;
            right: -20px;
            cursor: pointer;
            color: #ddd;
        }

        .modal .box {
            background: #fff;
            display: block;
            box-sizing: border-box;
            border-radius: 5px;
            text-align: center;
            padding: 20px;
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
        }
    </style>
</head>

<body>

    <button data-modal="example">Open modal</button>

    <div class="modal" id="example">
        <div class="box">
            <div class="close">x</div>
            <h1>Very simple modal</h1>
            <button data-modal="example_2">Open second modal</button>
        </div>
    </div>

    <div class="modal" id="example_2">
        <div class="box">
            <div class="close">x</div>
            <h1>Multiple modals is easy</h1>
        </div>
    </div>

    <script>
        const btnOne = document.querySelector("[data-modal='example']");
        const btnTwo = document.querySelector("[data-modal='example_2']");

        [btnOne, btnTwo].forEach((btn) => {
            btn.addEventListener("click", () => {
                const btnId = btn.getAttribute("data-modal");
                const modal = document.getElementById(`${btnId}`);
                modal.classList.add("active");
            });
        });

        const closeBtns = document.querySelectorAll(".close");
        closeBtns.forEach((closeBtn) => {
            closeBtn.addEventListener("click", () => {
                const modal = closeBtn.closest(".modal");
                modal.classList.remove("active");
            });
        });
    </script>

</body>

</html>
07/22/2020 09:04 OemG#8
#closerequest