JS oder HTML Problem

OemG · 07/21/2020, 08:47

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

Spoiler

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

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

Grüße,

OemG

Legendary · 07/21/2020, 10:01

#moved

Devsome · 07/21/2020, 10:04

Zeig uns doch dann mal die Code den du versuchst der Fehler verursacht, dann können wir dir besser helfen (:

OemG · 07/21/2020, 10:14

Quote:

Originally Posted by Devsome

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

Link zum Code

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?

False · 07/21/2020, 10:31

Quote:

Originally Posted by OemG

Reicht das hier nicht aus?

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?

OemG · 07/21/2020, 10:38

Quote:

Originally Posted by OemG

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

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

Grüße,

OemG

Quote:

Originally Posted by False

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.

lnqlorlouz · 07/21/2020, 18:42

Quote:

Originally Posted by OemG

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>

OemG · 07/22/2020, 09:04

#closerequest