smuckert smuckert - 2 days ago 4
Javascript Question

Hiding modal in react

I need some help with hiding my modal. On my button onclick I'm running the built in

showModal()
function which opens up my popup window. Since
showModal()
already existed I assumed there would be a similar built in function like
hideModal()
.

The window will close if I press the escape key so I'm wondering what happens when I press ESC. This is my function for displaying it:

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


And here is the element im trying to show/hide:

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

Answer

sorry, I forgot this was not angular. Edited: This is in pure html, dialog option, you can use it like a modal:

Here you have a simple example of how to open and close a modal:

<!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 into a new.html and check. Hope this helps

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