dantaros
Goto Top

HTML-Javascript - Problem mit Modals

Hallo zusammen,

ich habe Probleme mit meinen Modals.

Auf meiner Seite gibt es fünf Modals über die unterschiedliche Felder gefüllt werden können.

Ich verwende den Code auch auf einer anderen Seite von mir, weil ich da aber nur ein Modal verwende, gab es keine Probleme.

Ich musste "onclick" beim Button hinzufügen, weil sonst immer nur das letzte Modal geöffnet wird.
Durch das Hinzufügen des Onclick-Events sind aber die Fehler entstanden.

Wenn man ein Modal nach einem Reload der Seite öffnen will, muss man immer einen Doppelklick auf den Button machen, danach genügt ein einfacher Klick.
Wenn man ein Modal schließt und ein anderes öffnet (Anwender hat zb das Falsche angeklickt), lässt sich das nicht mehr über das "X" schließen, sondern nur noch indem man aus dem Modalfenster klickt.
Wenn man danach wieder das erste Modal öffnet, lässt es sich gar nicht mehr schließen und man muss die Seite neuladen.


Anbei der code von zwei Modals.
Da meine Kenntnisse in HTML und Javascript recht beschränkt sind, habe ich es nicht anders hin bekommen als den Code für jedes Modal zu wiederholen und nur die Variablen zu ändern.

Buttons:
<button id="prodplus" class="plusbtn" onclick="prodmodal()">+</button>  
<button id="mwpplus" class="plusbtn" onclick="mwpmodal()">+</button>  
...
Modal Inhalt:
<!-- Produktion Modal -->
<div id="ProduktionModal" class="modal">  
	<form action="" method="post">  
<!-- Modal content -->
		<div class="modal-content">  
			<span class="close">&times;</span>  
			<label for="produktion">Produktion:  
				<textarea class="textarea" id="produktion" name="produktion" type="text" required></textarea>  
			</label>
			<input class="Button" type="submit" value="speichern">  
		</div>
		<input type="hidden" name="aktion" value="speichern">  
	</form>
</div> 

Modal Funktion:
<script>
	function prodmodal(){
		// Get the modal
		var modal = document.getElementById("ProduktionModal");  

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

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

		// When the user clicks on 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>
<script>
	function mwpmodal(){
		// Get the modal
		var modal = document.getElementById("MWPModal");  

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

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

		// When the user clicks on 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>
...

Modal CSS:

/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  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/Box */
	.modal-content {
	  background-color: #fefefe;
	  margin: 15% auto; /* 15% from the top and centered */
	  padding: 20px;
	  border: 1px solid #888;
	  width: 80%; /* Could be more or less, depending on screen size */
	}

	/* The Close Button */
	.close {
	  color: #aaa;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	}

	.close:hover,
	.close:focus {
	  color: black;
	  text-decoration: none;
	  cursor: pointer;
	} 

Ich hoffe ihr könnt mir weiterhelfen.

Mit freundlichen Grüßen
Dantaros

Content-ID: 562891

Url: https://administrator.de/contentid/562891

Ausgedruckt am: 04.11.2024 um 18:11 Uhr

Krabat08
Krabat08 01.05.2020 um 00:05:28 Uhr
Goto Top
Hallo Dantaros,

Ich hatte auch mal ein ähnliches Problem.
Ich frage mich allerdings, warum du für jedes Modal einen eigenen JS-Code machst. Wenn du für alle eins machst hast du, wenn du ein weiteres Modal irgendwann einfügst nicht das Problem mehr JS einzufügen. Außerdem wenn ein Codefehler bei allen ist, musst du dass auch bei jedem abändern.

Deine Buttons:
<button id="prodplus" class="plusbtn" onclick="openModal('ProduktionModal')">+</button>  
<button id="mwpplus" class="plusbtn" onclick="openModal('MWPModal')">+</button>  

...
Dein Modal Code

Dein Close-Button müsstest du folgenderweise anpassen:
<span class="close" onclick="closeModal('ProduktionModal')">&times;</span>  

die ID ProduktionModal musst du auf die einzelnen Modals anpassen.
...

Modal Funktion:
<script>
	var modal
	function openModal(id) {
			//Get the modal
			modal = document.getElementById(id);
	
			//Open the Modal
			modal.style.display = "block";  
	}

	function closeModal(id) {
			//Get the modal
			modal = document.getElementById(id);

			//Close the Modal
			modal.style.display = "none";  
	}

	window.onclick = function(event) {
			if (event.target == modal) {
					modal.style.display = "none";  
			}
	}

</script>

...
Dein CSS
...


Du müsstest meinen Code noch testen.
Habe momentan nicht die Zeit dafür ein komplettes Konstrukt aufzubauen.

Sollte aber soweit funktionieren.

Grüße

Krabat08