Show a Pop-Up When a Key is Pressed

My website popup features a 'Close' button in the top right corner, a text section with a background image, and a 'Print' button at the bottom. The popup automatically appears when the page loads. However, once closed, there is currently no way to reopen it without refreshing the page. I have been attempting to make the popup reappear when the user presses either the letter 'G' or 'g,' but so far I have been unsuccessful. I came across this resource which I believe could be integrated into my existing code, though I have struggled to do so.

It's important to note that I would prefer to utilize the current functionality within the JS code rather than relying on an external plugin that needs to be downloaded. Below is the snippet of my code:

$(document).ready(function() {
    $(function(){
  
      $('#PopUp').css("visibility", "visible"); 
       $('#PopUp').css("opacity", 1); 
    });
  
    $( ".close" ).click(function() {

       $('#PopUp').css("visibility", "hidden"); 
       $('#PopUp').css("opacity", 0);
    });
});

        function printDiv()
        {
            var content = document.getElementById('printableDiv').innerHTML;
            var win = window.open();
            win.document.write(content);
            win.print();// JavaScript Print Function
            win.close();//It will close window after Print.
document.getElementById("pdf1").style.top=117 + "px";  
        }
    .t {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        -webkit-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -ms-transform: scale(0.25);
        z-index: 2;
        position: absolute;
        white-space: pre;
        overflow: visible;
    }

    #t1_1{left:256px;top:35px;letter-spacing:0.1px;}
    #t2_1{left:334px;top:87px;word-spacing:-0.1px;}
    ...
    
</div>
</div>
</div>

Answer №1

To display the pop, you can create a keyup event listener on the document body or any other preferred target.

$(document.body).keyup(function(e){
  var key=e.which||e.keyCode;
  if(key==71){
    $("#PopUp").css({opacity:"1",visibility:"visible"})
  };

Check out this demo for more information

Answer №2

To showcase a modal, simply add an event listener for the keypress on the 'g' keyCode (which is code 103) and implement the logic to display the modal from there.

$(document).ready(function() {
    $(document).keypress(function(e){
        if(e.charCode === 103) {
             $('#PopUp').css("visibility", "visible"); 
             $('#PopUp').css("opacity", 1); 
        }
    });
    $(function(){
  
       $('#PopUp').css("visibility", "visible"); 
       $('#PopUp').css("opacity", 1); 
     });

  $( ".close" ).click(function() {

       $('#PopUp').css("visibility", "hidden"); 
       $('#PopUp').css("opacity", 0);
    });
});

function printDiv()
{
    var content = document.getElementById('printableDiv').innerHTML;
    var win = window.open();
    win.document.write(content);
    win.print(); // JavaScript Print Function
    win.close(); // It will close window after Print.
    document.getElementById("pdf1").style.top=117 + "px";  
}
.t {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        -webkit-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -ms-transform: scale(0.25);
        z-index: 2;
        position: absolute;
        white-space: pre;
        overflow: visible;
    }

    /* CSS styles continue... */
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="PopUp" class="overlay">
        <div class="PopUp">
            <a class="close" href="#">&#10005;</a>
            <div class="content">
                <div class="printableDiv" id="printableDiv"></div>

<!-- More HTML elements... -->
                
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery is unable to interpret JSON containing the character c-cedilla

Issues with jQuery Parsing JSON Response with French Characters The request made using jQuery for JSON data is as follows: $.ajax({ url: "retrieve", dataType: 'json', success: function (x) { }, error: function (jqXHR, textStatus ...

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

Unable to shift the header menus upwards for proper alignment with the logo

Header with logo I'm trying to align the menu items like Home, etc with the logo, but it seems like the logo is taking up too much space above the menu headers and I'm not sure how to reduce it. I've already attempted using margin-left or r ...

Fetching data using JSONRequest sample code

I am new to web development and this is my first attempt at using JSON. On the JSON website (http://www.json.org/JSONRequest.html), they recommend using JSONRequest.get for certain tasks. However, I keep running into an error stating "JSONRequest is not ...

"Is there a way to retrieve a field from a different model within a Mongoose model

Presented below are two distinct MongoDB Models: Movie Model import mongoose from 'mongoose'; const movieSchema = new mongoose.Schema({ title: { type: String, required: [true, 'Please Enter the Movie Title'], trim: true, ...

Headers cannot be set once they have already been sent in an express js application

After reviewing various responses to this query, I am baffled as to why this error keeps appearing despite having res.send() in multiple paths. In my code (expressjs 4.13), it looks something like this: var user ={ username: "some", password: "a" ...

PHP Email Request Denied with 500 Internal Server Error Response

I am currently working on designing a contact form for a website. I have implemented a jQuery .click() function for an HTML button and utilized ajax to invoke the email.php code. However, when I click the button, the console shows the error message: 500 ( ...

Using PHP and mysqli to upload binary data to a database through a form

I'm facing an issue while attempting to upload an image into a database as a blob using PHP with the mysqli extension. When I try to insert just the image name using a query, everything works perfectly fine, and a new row with the name is successfully ...

Automatically redirect to a different page upon clicking the jquery popup button

I integrated a jQuery popup feature on my website to display messages. Now, I am looking to implement a redirect to another page when the user clicks a button within the jQuery popup. However, I am unsure of how to achieve this. <script type="text/ja ...

Having trouble accessing a jQuery function in the componentDidMount() of a React component from a separate .js file

I have been diving into the world of jQuery for quite some time now and it has been a rewarding process. However, there is one particular challenge that I am currently facing. Despite my efforts to find a solution on my own, the answers I came across were ...

Refreshing a webpage post initial loading using Next.js

Having trouble with my checkout route ""./checkout"" that displays embedded elements from Xola. The issue arises when using client-side routing as the checkout page requires a manual refresh to load correctly and show the Xola elements on the DOM ...

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

I'm having trouble getting onClick to function properly in CodeIgniter

While attempting to utilize onClick in the PHP page as shown below: <a href="javascript:void(0);" onClick="deleteCourse('<?php echo $row->courseId;?>');" class="delete">Delete</a> And in the JavaScript page, the function is ...

How does handleChange receive the value as an input?

Greetings! Currently, I am delving into the world of React and JavaScript. I am experimenting with a Table Component demo that can be found at the following link: https://codesandbox.io/s/hier2?file=/demo.js:5301-5317 In the demo, there is a function defi ...

Unusual Glitch in Bootstrap 3 Dropdown Menu

I am currently developing a website using Bootstrap 3. I am encountering an issue with the navbar dropdown. When I click on the link, it changes to show "expand child menu" and "collapse child menu". To clarify, here is the image I am referring to: Initi ...

How to use jQuery to disable td and ul elements

Has anyone successfully disabled a "td" or "ul" element using jQuery, similar to how we disable textboxes and other input types? I attempted to use the "prop" and "attr" functions in jQuery, but they did not seem to work. Is there a way to achieve this? ...

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

Execute operations on element itself rather than the output of document.getElementbyId

I encountered an issue involving an HTML element with the ID of BaseGridView. When I call a function directly on this element, everything works perfectly. However, if I use document.getElementById() to retrieve the element and then call the function, it do ...

Proper usage of a method within another method in a Vue component

Currently, I am extracting GPS data from an image using exifjs. My objective is to convert the latitude and longitude variables into a decimal variable as illustrated below: <template lang="html"> <div class="upload-wrap"> <button cla ...

Why is my JSON object being mistakenly interpreted as a string literal during iteration?

I'm facing a seemingly simple question but I can't seem to figure it out. Below is the jQuery code I am working with: $(function() { $.get(urlGetContainerNumbers, function(data) { console.log(data); for (var idx = 0; idx &l ...