smuckert smuckert - 8 months ago 47
Javascript Question

Hiding modal in react

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

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

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

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

<dialog id="myDialog">
<input className="modalInput" /><br />
<input className="modalInput" /><br />
<input className="modalInput" /><br />
<textarea /><br />

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


Answer Source

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>

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

function openthis() { 

function closethis() { 


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download