隱藏模態反應

我需要一些幫助隱藏我的模態。在我的按鈕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恢復。感謝您的更新 –

隱藏模態反應

回答

相關問題