beatovich: modale Fenster, was beachten?

Beitrag lesen

SELF-Forum

modale Fenster, was beachten?

beatovich Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

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.

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

#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.

Beitrag melden
–
Informationen zu den Bewertungsregeln