Hi Bhavesh23,
You will create a button click event openModel(), then you create the onClick function to close Modal.
You will create a function for the open and close model in JavaScript.
When your code run, you will get a modal popup from the F2 key.
Please refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fff; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
</style>
</head>
<body>
<form id="form1" runat="server">
<button onclick="openModal()">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p>Modal content goes here.</p>
</div>
</div>
</form>
<script type="text/javascript">
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
document.addEventListener('keydown', function (event) {
if (event.which == 113) {
openModal();
}
});
</script>
</body>
</html>
Screenshot
