Hoe maak je een ShowModalDialog Sluit

January 27



De window.showModalDialog () JScript methode laadt een URL in een modaal dialoog venster. Een modale dialoog weergegeven met deze methode is een venster object dat, eenmaal geactiveerd, blijft boven alle andere browservensters totdat u expliciet sluiten. Terwijl de modale raam open is, kan je niet communiceren met alle andere vensters of schakelen tussen vensters. Een dialoogvenster geopend met de methode showModalDialog () is een specifiek type venster en kan worden gesloten met dezelfde methoden die worden gebruikt om niet-modaal (modaal) vensters te sluiten.

Instructies

•  Gebruik een tekstverwerker om een nieuw tekstbestand met de naam modal.html creëren. Typ wat HTML in het bestand dat een invoerveld verschijnt. Bestempelen het invoerveld "Naam", voeg een nieuwe regel met behulp van een tag, en sla het bestand op. <Html> <body> Naam: <input type = "text"> <br> </ body> </ html>

•  Gebruik een tekstverwerker om een tweede tekstbestand inner_page.html naam te maken. Voeg een HTML-knop om het bestand met de onclick () event en de methode window.close () om het modale venster te sluiten gebruikt. Label de knop "Sluit dit venster". Opslaan en sluiten van inner_page.html. <Html> <head> </ head> <body> <button onclick = window.close ();> Sluit dit scherm </ button> </ body> </ html>

•  heropenen modal.html. Voeg een JavaScript-functie om de <head> sectie van de HTML-code genaamd tonen Modal (). Voeg een methode showModalDialog () om de show Modal () functie. De methode showModalDialog () neemt drie argumenten: de pagina weer te geven in de modal venster, optionele argumenten die kunnen worden doorgegeven aan de modale venster, en optionele fysieke kenmerken van de modale venster. Voeg deze argumenten en op te slaan modal.html. <Html> <head> <script language = "JavaScript"> functie tonen Modal () {window.showModalDialog ("inner_page.html", "", "dialogWidth: 200px; dialogHeight: 200px;"); } </ Script> </ head> <body> Naam: <input type = "text"> </ body> </ html>

•  Ga bewerken modal.html, en voeg een HTML-knop onder de "Naam:" invoerveld dat de onclick () gebeurtenis gebruikt om de show Modal () functie aan te roepen. Label de knop "Verzenden", en slaan en te sluiten modal.html. <Html> <head> <script language = "JavaScript"> functie tonen Modal () {window.showModalDialog ("inner_page.html", "", "dialogWidth: 200px; dialogHeight: 200px;"); } </ Script> </ head> <body> Naam: <input type = "text"> <br> <knop op Click = "toon Modal ();"> Verzenden </ button> </ body> </ html >

•  Open modal.html in een webbrowser die de methode showModalDialog () ondersteunt. Niet invullen van de "Naam:" veld, en klik op de knop 'Verzenden'. De modale dialoogvenster wordt geopend. Verplaats de dialoog uit de weg, en proberen in te vullen de "Naam:" veld weergegeven in modal.html. Omdat de modale dialoog open is, kan modal.html niet nemen focussen en kan niet worden bewerkt. Klik op de "Sluit dit venster" toets om het modale venster te sluiten.

Tips en waarschuwingen

Functies die niet-modaal (modaal) dialoogvensters te sluiten kan ook dicht modale dialoogvensters, waaronder self.close (), door te klikken op de browser sluitknop (x). Niet alle browsers ondersteunen showModalDialog (), maar het wordt ondersteund in de meeste nieuwere browsers. Zie het gedeelte Bronnen voor informatie over hoe u een modale dialoog in browsers die geen ondersteuning showModalDialog weer te geven (). Modale dialoogvensters geopend met showModalDialog () hebben toegang tot de woning dialogArguments. Gebruik deze eigenschap om informatie door te geven aan de modale dialoog. Modale formulieren kunnen gebruikers in verwarring als ze niet worden toegepast en goed messaged. Vensters geopend met showModalDialog () kunnen problemen hebben bij het plaatsen terug.