Question

隐藏我的模态我需要一些帮助。在我的按钮上点击我运行内置的showModal()功能，打开我的弹出窗口。由于showModal()已经存在，我假设会有类似内置函数，例如hideModal()。

如果我按下退出键，窗口将关闭，所以我想知道按ESC时会发生什么。这是我显示它的功能：

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

这是我试图展示/隐藏的元素：

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

抱歉，我忘了这不是棱角分明的。编辑：这是纯HTML，对话框选项，你可以像模态一样使用它：

这里有一个如何打开和关闭模态的简单示例：

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

复制粘贴到new.html并检查。希望这有帮助

also here´s a fiddle in react showing how to show and hide a div - 来自用户@jan klimo。

隐藏模态反应

1 个答案: