Modale werden jetzt auch von HTML unterstützt, dort nennt es sich "Dialog":
Wenn dort von Returnvalues und Forms die Rede ist, ist das für dich zunächst nicht relevant und Du kannst es zurück stellen.
Wie Du siehst, braucht man für das Öffnen und Schließen ein wenig Javascript. Hier muss man einräumen, dass auch Bootstrap gewisse Vorteile hat, indem es einem das abnimmt und verbirgt.
Was Grid betrifft, ist die Doku auf css-tricks immer noch sehr gut:
Versuch mal ob Du damit und meinem Beispiel aus deinem vorigen Thread zum Ziel kommst.
Ja, die Beschreibung scheint auch ziemlich gut zu sein, eben so wie einiges anderes auf kulturbanause.de.
Interessante Fragen. Ich habe das mal mit dem Dialog-Element von HTML ausgetestet.
Zitatein Dialog scrollt mit der Seite mit.
Kann ich nicht bestätigen. Verhält sich wie ein mit position: fixed; positioniertes Element, d. h. bezogen auf das Browserfenster bleibt die Position fest und der übrige Inhalt scrollt darunter hindurch.
Zitatwhen the dialog is open you can still interact with the page just like normal.
Kann ich ebenfalls nicht bestätigen. Wenn mein dialog-Element offen ist, kann ich mit der übrigen Seite nicht mehr interagieren.
Kommt mir so vor als hätte der Verfasser eine private Vorstellung von dem Begriff "Dialog", die mit dem Verhalten des Dialog-Elementes von HTML nicht übereinstimmt.
Teste es am besten mal selbst aus, ob das Dialog-Element sich so verhält, wie Du es wünschst.
PS: Ich habe das noch ein wenig weiter untersucht: Öffne ich das Dialog-Element durch das Attribut "open" scrollt es mit dem übrigen Inhalt mit, so wie der Verfasser es beschreibt. Aber nur dann.
PS: Ich habe das noch ein wenig weiter untersucht: Öffne ich das Dialog-Element durch das Attribut "open" scrollt es mit dem übrigen Inhalt mit, so wie der Verfasser es beschreibt. Aber nur dann.
Hallo, ich klinke mich hier mal ganz frech ein 
Soweit ich weiß, ist das Verhalten je nach dem ob man das <dialog>-Element mit .show() oder .showModal() öffnet anders. Ersteres sollte zum gleichen Ergebnis führen, wie das "open" Attribut zu setzen.
Verrätst Du uns auch was Du auf w3schools gefunden hast?
IMO ist die Entscheidung "Tabelle oder nicht" unabhängig davon ob sie sich in einem Modal oder direkt in der Seite befindet. Warum meinst Du denn, dass dein Werk misslungen ist? Vermutlich weil die einzelnen Zellen direkt aneinander hängen so dass man nicht erkennt, was wozu gehört? Das liegt aber am Styling und mit ein wenig Rändern oder Padding oder Margin kann man das sicher wesentlich verbessern.
Unabhängig davon hat ein Gridlayout aber gewisse Vorteile, ich glaube, ich habe schon Mal darauf hin gewiesen.
Ich habe mal deine Tabelle umgestellt:
<div class="modal-body">
<div class="grid-container">
<div class="nr">Nr. 1</div>
<div class="name">Michael Schlegel</div>
<div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen
Im allgemeinen Sprachgebrauch haben sich die Begriffe Angler oder Angelfischer durchgesetzt
</div>
<div class="phone">08154711</div>
<div class="nr">Nr. 22</div>
<div class="name">Franz Kowalsky</div>
<div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div>
<div class="phone">08154711</div>
<div class="nr">Nr. 333</div>
<div class="name">Klaus-Dieter Germann</div>
<div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div>
<div class="phone">08154711</div>
</div>
</div>Und mit diesem CSS kannst Du die Elemente vierspaltig anordnen:
.grid-container {
display: grid;
/* 4 Spalten mit dem gewünschten Verhältnis
der Breite anlegen */
grid-template-columns: 1fr 3fr 8fr 3fr;
/* Damit es übersichtliche wird, einen kleinen
Zwischenraum zwischen den Zellen erzeugen */
gap: 1em;
}
/* Bei schmalem Browserfenster auf einspaltige
Anordnung umschalten */
@media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}Du siehst, es wird dadurch sehr kompakt. Auch auf die Klassen könntest Du verzichten wenn Du nth-of-type verwenden würdest. Allerdings ist es mit Klassen ein wenig klarer, was gestylt wird.
ZitatVerrätst Du uns auch was Du auf w3schools gefunden hast?
Die Frage hat sich geklärt, es ist das was Du jetzt online hast.
Auch auf die Klassen könntest Du verzichten wenn Du nth-of-type verwenden würdest. Allerdings ist es mit Klassen ein wenig klarer, was gestylt wird.
das geh ich an wenn ich das grid verstanden habe.
Jetzt schau ich erst mal wie sich dein Code bei mir verhält
Das hätte ich auch erwartet. Der Grund, dass das nicht passiert ist, dass text-align: center; von main>section geerbt wird. Warum sich das durchsetzt ist zunächst unerwartet. Meine Vermutung: Der Text ist ein eigener Knoten im DOM und die Flex-Anweisungen wirken auf diesen Knoten ohne den Text darin zu beeinflussen, das text-align jedoch auf den Text innerhalb des Knotens.
Beheben kannst Du das indem Du zusätzlich text-align-left; dem Flexitem zuweist.
Für mich ist es erst Mal spät genug für heute, ich sehe mir das morgen an.
Gute Nacht!
Guten Morgen,
ich verstehe das so, dass in der finalen Version das Grid viel mehr Zeilen hat, so dass es in das Modal nicht hinein passt.
Wenn wir das Eventbubbling für die Touchevents auf den Inhalt des Modals unterbinden, müsste das zum Ziel führen, versuche das:
const modalContent = document.querySelector('div.modal-content');
modalContent.addEventListener('touchstart', event => {
event.stopPropagation();
});
modalContent.addEventListener('touchmove', event => {
event.stopPropagation();
});
modalContent.addEventListener('touchend', event => {
event.stopPropagation();
});Ich verfolge interessiert Eure Diskussion. Vor einiger Zeit hatte ich Bedarf an einem Modal, das ohne Framework auskommt, individuell anpassbar ist und sich – für mich besonders wichtig – auf Mobilgeräten mit dem Back-Button des Gerätes schließen lässt, ohne dass man gleichzeitig auch die Seite verlässt, von der aus das Modal geöffnet wurde. Dieses benutzerunfreundliche Verhalten findet man leider viel zu oft im Internet, die Bootstrap-Modale machen da keine Ausnahme.
Falls Interesse daran besteht, ich füge den Code eines kompletten HTML-Dokuments hier ein. Aber natürlich möchte ich damit keinesfalls Euren derzeitigen Thread stören, zumal mein Modal Emess’ derzeitige Anforderung („Nur das Modal soll scrollen nicht die Seite im Hintergrund.“) nicht erfüllt.
Einen schönen Sonntag allen unermüdlichen Webworkern!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal with user-friendly back button</title>
<style>
/* Global styles to reset margin, padding, and box-sizing */
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styles with default font and size */
body {
font-size: 1rem;
line-height: 140%;
font-family: sans-serif;
}
/* Styles for the modal and modal body, centered using flexbox */
#modal,
.modal-body {
display: flex;
justify-content: center;
align-items: center;
}
/* Styles for the main content area, flex column layout with some padding */
main {
display: flex;
flex-direction: column;
min-height: 300vh;
align-items: start;
padding: 5vw;
background-color: aliceblue;
}
/* Styles for the modal overlay */
#modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, .8);
opacity: 0;
transition: opacity .7s, transform .1s 1s;
transform: translateX(-100%);
}
/* Styles for the active state of the modal, bringing it into view */
#modal.active {
transform: translateX(0);
opacity: 1;
transition: opacity .7s;
}
/* Styles for the modal body content, with padding and rounded corners */
.modal-body {
margin: 0 5vw;
padding: 10vw;
background-color: #fff;
flex-direction: column;
border-radius: 8px;
}
/* Styles for the open and close buttons, with some common styling */
#openModal,
#closeModal {
color: #fff;
background-color: darkgreen;
border: none;
margin: 1rem auto;
padding: 1rem;
border-radius: 8px;
}
/* Styles for the close button, with a different background color */
#closeModal {
background-color: palevioletred;
}
/* Styles for a text element with bold font and specific color */
.better {
font-weight: bold;
color: firebrick;
margin-top: 1.5rem;
text-align: center;
}
</style>
</head>
<body>
<main>
<p>Duis nisi et commodo nostrud duis veniam ipsum. Mollit tempor deserunt labore cupidatat aute deserunt adipisicing eu ad et cillum sit officia sit. In do aliquip irure nostrud labore nisi deserunt quis aliquip velit officia in deserunt ea cillum. Nulla excepteur Lorem enim voluptate mollit nulla consequat exercitation. Cillum adipisicing aliquip est officia occaecat sint proident occaecat veniam enim aliquip voluptate excepteur. Cillum minim incididunt labore deserunt eiusmod dolore ad ex cupidatat incididunt culpa pariatur ut in occaecat. Ullamco do ipsum dolore esse consequat culpa culpa incididunt sit reprehenderit deserunt exercitation dolor mollit consequat. Laborum ipsum occaecat esse sint est id aute occaecat sit sit eu.</p>
<button id="openModal">OPEN MODAL</button>
<p>Sit adipisicing consequat aute ea proident do culpa nostrud duis laborum. Amet ex laboris proident mollit fugiat laborum cupidatat. Exercitation amet elit qui elit velit nisi ex voluptate amet consequat exercitation. Esse esse magna Lorem nulla sit veniam reprehenderit consectetur. Fugiat qui magna exercitation. Est qui ex fugiat ea velit et nulla culpa culpa nulla nulla ut fugiat. Nostrud occaecat sunt tempor exercitation mollit est nulla nulla aute pariatur reprehenderit elit. Amet non quis fugiat cillum labore labore exercitation duis ad sit culpa esse non.</p>
<p>Cillum nisi excepteur ex proident cillum anim quis amet ullamco nisi. Dolore eiusmod exercitation minim minim aliqua non pariatur nulla anim minim cillum sunt amet irure mollit. Ut cillum minim do qui anim aliquip commodo ex tempor quis excepteur culpa culpa id id. Anim aute enim cillum mollit laborum eu deserunt velit aliqua sint id consequat culpa nulla. Lorem aliqua deserunt irure irure ut. Ex veniam cillum esse eu eu mollit. Consectetur pariatur dolor ad.</p>
<p>Consectetur commodo esse veniam. Lorem et dolor dolore minim aute et commodo. Mollit aute irure dolor dolore ut pariatur nulla tempor elit dolore. Enim aute ea aliquip consectetur minim adipisicing do nostrud ut aliqua minim magna laborum proident culpa.</p>
<p>Magna Lorem sint veniam sit quis culpa id magna laborum deserunt incididunt occaecat magna ad. Incididunt velit aliquip irure nostrud fugiat ut exercitation anim excepteur. Cillum ex consequat sunt nulla voluptate ea culpa ut non mollit adipisicing non velit. Elit minim veniam aliquip id reprehenderit sunt et est est dolore. Veniam incididunt officia veniam labore excepteur non fugiat exercitation. Officia nisi reprehenderit ut laborum ut officia est nisi tempor non reprehenderit.</p>
<p>Dolore irure et nisi sit velit consectetur reprehenderit dolor in reprehenderit tempor excepteur. Pariatur adipisicing excepteur culpa eiusmod non amet esse mollit aliqua sunt. Reprehenderit ad duis magna in pariatur consequat do ullamco eu esse. Eiusmod mollit mollit culpa culpa commodo laboris fugiat elit cupidatat dolor aliqua nisi elit. Aliquip dolore duis ad eu in id et commodo sint deserunt. Ea fugiat nulla deserunt fugiat anim consequat. Dolore exercitation sit in est sit incididunt Lorem deserunt eiusmod. Cupidatat culpa minim dolor culpa duis reprehenderit ut ea officia adipisicing culpa mollit.</p>
<p>Quis nostrud Lorem labore tempor sit occaecat id amet quis irure cillum. Id aliquip deserunt reprehenderit aliqua aute ullamco ipsum tempor non sunt nulla mollit eu. Et est fugiat nulla id culpa. Dolor tempor cupidatat Lorem eiusmod nostrud in. Esse quis incididunt Lorem eiusmod incididunt eu anim et commodo ea reprehenderit officia ea. Tempor eiusmod dolor ea aute irure consequat minim duis dolore nisi excepteur fugiat Lorem ullamco.</p>
<p>Nulla voluptate enim mollit non occaecat. Mollit fugiat aliquip voluptate eiusmod nulla. Proident reprehenderit duis proident sunt voluptate eu deserunt dolor esse ex nostrud. Do quis do nostrud incididunt dolore culpa sint sint voluptate eu minim velit.</p>
<p>Occaecat mollit sunt veniam esse dolor. Ad ullamco mollit laboris. Consectetur eiusmod deserunt voluptate quis esse consectetur fugiat ut aliquip. Dolore non ipsum sunt Lorem minim elit commodo et exercitation cupidatat occaecat. Minim occaecat ad esse esse.</p>
<p>Id proident Lorem ullamco voluptate. Esse aliqua commodo cillum elit minim eiusmod eu sint. Aute qui dolore nostrud sit nulla adipisicing dolor aute excepteur nisi. Irure id ad laboris quis deserunt irure in eiusmod magna Lorem veniam. Magna voluptate cupidatat ipsum dolore aliquip do pariatur labore Lorem sint cupidatat dolore ad eiusmod. Eu ex veniam occaecat ut nisi deserunt in magna culpa dolor consequat excepteur consectetur occaecat. Non non cillum mollit labore.</p>
</main>
<div id="modal">
<div class="modal-body">
<p>This is the modal.</p>
<button id="closeModal">CLOSE MODAL</button>
<p class="better">Try to close it with the back button on mobiles!</p>
</div>
</div>
<script>
// JavaScript code for handling modal functionality
// Get references to DOM elements
const modal = document.getElementById('modal');
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
// Event listener for opening the modal
openModal.addEventListener('click', () => {
// Push a new state to the browser history
history.pushState(null, null, window.location.pathname);
// Add the 'active' class to display the modal
modal.classList.add('active');
});
// Event listener for closing the modal
closeModal.addEventListener('click', () => {
// Remove the 'active' class to hide the modal
modal.classList.remove('active');
// Go back in the browser history
history.go(-1);
});
// Event listener for clicking on the modal overlay
modal.addEventListener('click', (event) => {
// Check if the click occurred on the overlay itself
if (event.target === modal) {
// Remove the 'active' class to hide the modal
modal.classList.remove('active');
// Go back in the browser history
history.go(-1);
}
});
// Event listener for browser history changes (back button)
window.addEventListener('popstate', function (event) {
// Remove the 'active' class to hide the modal
modal.classList.remove('active');
}, false);
</script>
</body>
</html>Zitat von @Failixsich – für mich besonders wichtig – auf Mobilgeräten mit dem Back-Button des Gerätes schließen lässt, ohne dass man gleichzeitig auch die Seite verlässt, von der aus das Modal geöffnet wurde. Dieses benutzerunfreundliche Verhalten findet man leider viel zu oft im Internet, die Bootstrap-Modale machen da keine Ausnahme.
Das ist ein interessanter Gesichtspunkt, hatte ich bisher gar nicht auf dem Schirm. Ich habe da eine Demo mit dem dialog-Element und werde versuchen, es dort einzubauen.
... getestet und funktioniert perfekt. Wieder etwas gelernt, vielen Dank für diesen Hinweis!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!