Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>Jota</title>
- <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
- <script>
- //configuration
- var codes = new Map();
- codes.set("1234", "output");
- codes.set("1234", "output");
- var errorMsg = "Error bericht";
- </script>
- </head>
- <body>
- <!-- Trigger/Open The Modal -->
- <input id="JotaCode">
- <button id="myBtn">Open Modal</button>
- <!-- The Modal -->
- <div id="myModal" class="modal">
- <!-- Modal content -->
- <div class="modal-content">
- <span class="close">×</span>
- <p id="modal-text">Some text in the Modal..</p>
- </div>
- </div>
- <script>
- // Get the modal
- var modal = document.getElementById("myModal");
- // Get the button that opens the modal
- var btn = document.getElementById("myBtn");
- // Get the <span> element that closes the modal
- var span = document.getElementsByClassName("close")[0];
- // Get the <p> text
- var modalText = document.getElementById("modal-text");
- // When the user clicks on the button, open the modal
- btn.onclick = function() {
- modal.style.display = "block";
- //Get the value from the map with the key from the input field
- var codeResult = codes.get(document.getElementById("JotaCode").value);
- // If a value is returned, show the text. or else show an error message
- if(codeResult != null) {
- modalText.innerHTML = codeResult;
- } else {
- modalText.innerHTML = errorMsg;
- }
- }
- // When the user clicks on <span> (x), close the modal
- span.onclick = function() {
- modal.style.display = "none";
- }
- // When the user clicks anywhere outside of the modal, close it
- window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = "none";
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement