Brauche Hilfe bei JavaScript möchte eine box (position: fixed) beim danneben klicken unsichtbar machen.?

2 Antworten

glebkema
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
18.03.2019, 23:05

Ich benutze die Lösung, die ich bei Bootstrap ausspioniert habe.

Das modale Fenster nimmt den gesamten Bildschirm ein, der Inhalt befindet sich jedoch nur in der Mitte, und die semitransparenten Kanten erfassen Mausklicks.

Wenn Sie auf die Schaltfläche Schließen klicken oder den Inhalt verlassen, wird das modale Fenster geschlossen. Wenn Sie auf den Inhalt des modalen Fensters klicken, bleibt es geöffnet. Mit dieser Funktion können Sie einem modalen Fenster ein Bestellformular hinzufügen.

Demo: https://codepen.io/glebkema/pen/RdBRBX

HTML

<div class="page-content">
	<button class="launcher">Open modal</button>
</div>

<div id="modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<button type="button" class="modal-close" tabindex="-1">&times;</button>
		<h2>Modal</h2>
	</div>
</div>

Javascript (jQuery):

jQuery(document).ready(function($) {
	var $modal = $('#modal');

	$('.launcher').on('click', openModal);

	$modal
		.on('click', closeModal)
		.on('click', '.modal-close', closeModal)
		.on('click', '.modal-dialog', function(event) {
		event.stopPropagation(); // prevent closing the modal window when user clicks on the window itself
	});

	function closeModal() {
		$modal.fadeOut();
	};

	function openModal() {
		$modal.fadeIn();
	};
});

CSS:

.modal {
	background: rgba(196, 196, 196, 0.5);
 display: none;
 outline: 0;
 overflow: hidden;
 position: fixed; top: 0; right: 0; bottom: 0; left: 0;
 width: 100%; height: 100%;
 z-index: 9000;
 -webkit-overflow-scrolling: touch;
}

.modal-dialog {
	background: #fff;
	border: 1px solid #666;
	border-radius: 9px;
	margin: 45px auto 0;
	max-width: 90%;
	position: relative;
	padding: 0 18px;
	width: 900px;
}

.modal-close {
  background: transparent;
  border: none !important;
  -webkit-box-shadow: none;
      box-shadow: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  margin: 0;
  outline: none !important;
  padding: 0 6px;
  position: absolute; top: 0; right: 0;
  text-align: center;
}
Woher ich das weiß:Berufserfahrung
glebkema  18.03.2019, 23:17

Bitte entschuldige mein ungeschicktes Deutsch. Ich habe den dritten Absatz neu geschrieben:

Durch Klicken auf die Schaltfläche Schließen oder auf die transparente Kante wird das modale Fenster geschlossen. Wenn Sie auf den Inhalt des modalen Fensters klicken, bleibt es geöffnet. Mit dieser Funktion können Sie beispielsweise einem modalen Fenster ein Bestellformular hinzufügen.

0
Franky12345678
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
18.03.2019, 22:10

Hier so pseudocodemäßig:

window.onclick = function(e) {
	if (menuIsVisible) {
		hideMenu();
	}
};
menu.onclick = function(e) {
	e.stopPropagation();
};

Wenn du irgendwo klickst, wird geprüft, ob das Menü sichtbar ist. Wenn ja, wird es geschlossen.

Wenn du ins Menü hineinklickst, wird das Event in der Propagation gestoppt, so dass es window.onclick nicht erreicht. Somit bleibt es in diesem Fall geöffnet.
Woher ich das weiß:Hobby
YussufS  18.03.2019, 22:43

gute Lösung - ich gebe nur zu Bedenken, dass irgendwelche Links im 'Hintergrund' damit immer noch klickbar sind. Wenn du beim Daneben Klicken einen solchen Link triffst, wird das Element nicht geschlossen, sondern dieser Link geöffnet. Dieses Verhalten will man so oft nicht haben. Ich würde bei derlei Pop-up-ähnlichen Konstruktionen daher vielleicht eher mit einem fensterfüllenden transparenten Div arbeiten, das darunter liegt und die Klicks außerhalb komplett abfängt.

4
Franky12345678  19.03.2019, 00:00
@YussufS

Mit dem Extra-div mache ich es immer in meinen HTML5-Apps^^.

Ich selber baue diese Menüs ohnehin meist so, dass sie rein mit CSS funktionieren^^.

Wollte hier eine einfache Lösung präsentieren, die keine weiteren Elemente benötigt.

Man kann ja so ein div einfügen und trotzdem mein Script verwenden. Solange sich das div nicht im Menü befindet (was ja Quatsch wäre), funktioniert das trotzdem.

0
YussufS  19.03.2019, 00:05
@Franky12345678

hey Franky - das sollte absolut keine Kritik sein. Ich wollte den Fragesteller nur darauf aufmerksam machen, dass deine schlanke und elegante Lösung evtl. nicht ganz das ist, was er sucht. Wenn einen das Verhalten so nicht stört ist das perfekt!

1
Franky12345678  19.03.2019, 00:06
@YussufS

Habe ich auch nicht so aufgefasst :).

Ich habe ja gesagt, dass ich deine Variante selber verwende.

0