Nico R.: Dialogfenster mit seltsamem Rahmen

Beitrag lesen

Hallo zusammen,

ich hoffe die Problemstellung ist heute etwas anspruchsvoller als gestern 😏

Wenn ich ein dialog-Element per showModal() öffne, schaffe ich es partout nicht, dieses Viewportfüllend anzuzeigen. Es ist immer ein Abstand/Rahmen drum herum. Schön zu sehen, wenn man in meinem Beispiel margin von 0 auf auto setzt.

Zeige ich dialog nicht per showModal(), sondern generisch im HTML per <dialog open> an, ist der Rahmen nicht da.

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<style>
		html, body {
			margin: 0;
			padding: 0;
			background-color: green;			
		}
	
		dialog {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			border: none;
			background-color: rgb(20,20,20);
		}	
	</style>
</head>
<body>

	<!--<dialog open></dialog>-->

	<script>
		const galerie = document.createElement('dialog');
		document.body.appendChild(galerie);
		galerie.showModal();
	</script>
	
</body>
</html>	

Das Verhalten ist in Chrome und Firefox gleich. Offensichtlich ist das also so gewollt. Vermutlich, um dem User zu zeigen, dass sich unter dem Fenster noch der eigentliche Inhalt der Seite befindet?

Ich weiß, dass ich per ::backdrop dem "Rahmen" die gleiche Farbe geben könnte, aber das löst leider mein Problem nicht. Denn ich möchte über das Fenster gerne Bilder aus einer Galerie anzeigen, und zwar in Vollbild, zumindest auf kleinen Bildschirmen.

Schöne Grüße

Nico