hallo Meine Fragen sind am Fuss des Codes. Modale Fenster haben ein Verhalten ähnlich zur javascript alert("box"), können aber mehr sein, als nur Dialog-Kontexte. Dennoch gilt folgendes: * Der Focus muss bei Aktivierung in dieses Element führen. * Im Fall von alert() ist ein Verlassen der Box nur über den OK-Button möglich. * Der OK-Button ist der erste aktivierbare Button. Ich habe nun gedacht, ich baue eine äussere Schicht eines modalen Fensters. ~~~javascript var modalWin = document.createElement("section"); modalWin.id="modalwin"; modalWin.role="dialog"; //.. function init (){ //.. document.getElementsByTagName("body")[0].appendChild( modalWin ); } //.. function showModalWin(appender){ modalWin.appendChild( appender ); modalWin.setAttribute("aria-hidden","false"); window.location.hash="#modalwin"; } function closeModalWin(target){ modalWin.firstChild.remove(); modalWin.setAttribute("aria-hidden","true"); window.location.hash="#"+target; } ~~~ CSS ~~~css #modalwin { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(120,120,120,0.3); z-index:200; } #modalwin:empty, #modalwin[aria-hidden="true"]{ display:none; } ~~~ Der Inhalt kann nun so etwas einfaches wie eine eigene alert-methode sein, oder etwas so komplexes wie ein Dateisystem-Menu. Ich kann ja noch dynamisch ein tabindex="1" setzen/entziehen für den ersten aktivierbaren Button des Inhalts. Aber was ich nicht kann: Ich kann einen User nicht daran hindern, den Bereich dieses Modal-Fensters zu verlassen und so in einen für ihn eventuell verwirrenden Kontext zu geraten. Meine generelle Frage deshalb: Was kann ich da konzeptionell verbessern? Danke für Tipps.

hallo Meine Fragen sind am Fuss des Codes. Modale Fenster haben ein Verhalten ähnlich zur javascript alert("box"), können aber mehr sein, als nur Dialog-Kontexte. Dennoch gilt folgendes: Der Focus muss bei Aktivierung in dieses Element führen. Im Fall von alert() ist ein Verlassen der Box nur über den OK-Button möglich. Der OK-Button ist der erste aktivierbare Button. Ich habe nun gedacht, ich baue eine äussere Schicht eines modalen Fensters. ~~~javascript var modalWin = document.createElement("section"); modalWin.id="modalwin"; modalWin.role="dialog"; //.. function init (){ //.. document.getElementsByTagName("body")[0].appendChild( modalWin ); } //.. function showModalWin(appender){ modalWin.appendChild( appender ); modalWin.setAttribute("aria-hidden","false"); window.location.hash="#modalwin"; } function closeModalWin(target){ modalWin.firstChild.remove(); modalWin.setAttribute("aria-hidden","true"); window.location.hash="#"+target; } ~~~ CSS ~~~css #modalwin { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(120,120,120,0.3); z-index:200; } #modalwin:empty, #modalwin[aria-hidden="true"]{ display:none; } ~~~ Der Inhalt kann nun so etwas einfaches wie eine eigene alert-methode sein, oder etwas so komplexes wie ein Dateisystem-Menu. Ich kann ja noch dynamisch ein tabindex="1" setzen/entziehen für den ersten aktivierbaren Button des Inhalts. Aber was ich nicht kann: Ich kann einen User nicht daran hindern, den Bereich dieses Modal-Fensters zu verlassen und so in einen für ihn eventuell verwirrenden Kontext zu geraten. Meine generelle Frage deshalb: Was kann ich da konzeptionell verbessern? Danke für Tipps.