Verstecken modal in reagieren

Ich brauche etwas Hilfe mit meinem modalen verstecken. Auf meinem Knopf onclick laufe ich die eingebaute showModal() Funktion, die mein Popup-Fenster öffnet. Da showModal() bereits existierte, nahm ich an, dass es eine ähnliche eingebaute Funktion wie hideModal() geben würde.Verstecken modal in reagieren

Das Fenster wird geschlossen, wenn ich die Escape-Taste drücke, also frage ich mich, was passiert, wenn ich ESC drücke. Dies ist meine Funktion zur Anzeige es:

modal(e) { 
    e.preventDefault(); 
    document.getElementById("myDialog").showModal(); 
}

Und hier ist das Element im anzuzeigen/auszublenden versuchen:

<dialog id="myDialog"> 
    Namn: 
    <input className="modalInput" /><br /> 
    Ålder: 
    <input className="modalInput" /><br /> 
    Ras: 
    <input className="modalInput" /><br /> 
    Beskrivning: 
    <textarea /><br /> 

    <button className="confirmBooking" onClick= 
    {this.bookingBtn}>Boka</button> 
    <button className="closeModal" onClick={this.closeModal}>X</button><br 
    /> 
    {this.state.bokning} 



    </dialog>

Quelle

2017-06-12 smuckert

einfach, versuchen Sie mit close() onClick = {this.close()} aber diese Taste muss INSIDE modal sein. –

sorry, ich habe vergessen, das war nicht eckig. Editiert: Dies ist in reinem HTML, Dialogoption, können Sie es wie ein modal verwenden:

Hier können Sie ein einfaches Beispiel davon, wie eine modale zu öffnen und schließen:

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the button to show the dialog.</p> 

<button onclick="openthis()">Show dialog</button> 

<p><b>Note:</b> Use the "Esc" button to close the modal.</p> 
<p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p> 

<dialog id="myDialog">This is a dialog window 
<button onclick="closethis()">close dialog</button> 
</dialog> 

<script> 
function openthis() { 
    document.getElementById("myDialog").showModal(); 
} 

function closethis() { 
    document.getElementById("myDialog").close(); 
} 
</script> 

</body> 
</html>

Copy-Paste in eine new.html und überprüfen. Hope dies hilft

also here´s a fiddle in react showing how to show and hide a div --von benutzer @jan klimo.

Quelle

2017-06-12 09:21:45

$ scope.closeModal = function() { $ scope.modal.hide(); } Ist das Jquery? Ich versuche dies zu tun, um zu reagieren, also bin ich mir nicht sicher, ob es in diesem Fall funktionieren wird. Danke für die Antwort – smuckert

OP ist nicht auf angularjs Antwort suchen. –

@ FooBar wurde zurückgesetzt. Danke für das Update –

Verstecken modal in reagieren

Antwort

Verwandte Themen