隐藏模态反应

我需要一些帮助隐藏我的模态。在我的按钮onclick上我运行内置的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>

来源

2017-06-12 smuckert

容易，尽量接近（）的onClick = {this.close（）} 但这个按钮必须INSIDE模式。 –

对不起，我忘了这是没有棱角。编辑：这是纯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 - from user @jan klimo。

来源

2017-06-12 09:21:45

$ scope.closeModal = function（）{ $ scope.modal.hide（）; } 这是jQuery吗？我试图做出这样的反应，所以我不知道它会在这种情况下工作。感谢您的回复 – smuckert

OP不寻找angularjs答案。 –

@FooBar恢复。感谢您的更新 –

隐藏模态反应

回答

相关问题