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

Exploring Parameters to Customize Search Results in React

I am currently working on implementing a data filtering system based on user input. However, it seems that the data disappears whenever I enter something into the search box. Upon inspecting the dev tools, I can see that the query state is being saved pro ...

How can I identify the appropriate default option element in AngularJS?

Query: I have a scenario where I need to set the default option in an angular dropdown menu based on values from an array of Person objects. How can I achieve this when initially loading the UI? http://plnkr.co/edit/hvIimscowGvO6Hje35RB?p=preview <!DO ...

Differences in typography across Mozilla Firefox and Internet Explorer

I have come across a question that seems quite common, yet unsolvable. However, I will give it a try anyway. Take a look at this image: To view a larger version of the image, visit the following URL: https://i.stack.imgur.com/dddNm.jpg HTML code: <d ...

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

What is the best way to get both the id and name of a selected item in Angular?

Within my select field, data is dynamically populated based on names. My objective is to not only capture the selected name but also its corresponding ID. Here's a snippet of my HTML template: <select class="custom-select d-block w-100" id="test" ...

Monitor files in different directories with the help of pm2

Can pm2 detect changes in directories outside of the current one? For example, if I have an index.js file in /home/sprguillen/workspace/node that needs to be run by pm2, but my configuration file is located outside in /home/sprguillen/workspace/config. I ...

Problem with JavaScript and Basic HTML5 Canvas

I'm trying to dive into learning about using a canvas, but I just can't seem to get this basic code to work. Does anyone know what I might be doing wrong? Link to jsfiddle <canvas id="ctx" width="500" height="500" style="border:1px solid #00 ...

Verify that the source of an image within a JSON file is blank by utilizing jQuery

I am attempting to retrieve images from Google using the Google Knowledge Graph Search API Link in JavaScript and jQuery. The JSON data returned by Google resembles the example below: { "@context": { "@vocab": "http://schema.org/", "goog": "http ...

Scouring through the text to find a specific word and bring it to the forefront

I need help creating a PHP script that can analyze a text input, which could be an extensive essay, and search for a specific word entered by the user. The script should display the entire text with the searched word highlighted whenever it is found. < ...

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS

I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...

Choosing a sequence of text snippets divided by the <br> tag found inside a specific class

Is there a way for me to extract each of those strings using jQuery or JavaScript? For example, 'fight club', 33 Main Street, Houston, etc. <span class="cart_text2"> Fight Club <br> 33 Main Street, <br> Hou ...

Managing multiple URLs in a MEAN Stack application

Currently, I'm working on a MEAN stack project to implement a CRUD system for managing courses. One specific aspect that is giving me trouble is figuring out how to handle unique URLs for each course I create. As of now, I am using routeprovider for t ...

Filling a martial arts training center's drop-down menu with choices using an Ajax response message

Within my application, there are two drop down menus. The first drop down menu allows users to select the type of institution, and I have added an onchange event that triggers a JavaScript function to make an AJAX call in order to populate the second drop ...

What is the best way to encode a GLTF file without compromising the encoding of other meshes and textures?

Currently, I am working on a fascinating web AR app that enables users to don GLTF head models. (You can check it out at ) To ensure optimal lighting of the GLTF model, I have implemented renderer.outputEncoding = THREE.sRGBEncoding, which has been very ef ...

Using Ruby on Rails to incorporate AJAX for posting and commenting functionality

Could use some assistance with implementing AJAX into my project. It seems like it should be a simple task, but I've been struggling with it for days. My goal is to have new comments appear without the need to reload the page. Below are references to ...

What is the best way to display a unique modal on every tab?

I'm facing an issue where I am attempting to trigger a modal on each tab item, however the modal only opens on the initial tab. Clicking on any other item results in the modal opening on the first tab instead. Additionally, when I add new items, I am ...

Collapse the borders of Angular's div layout container

I need help with collapsing the borders of div containers when generating a table using angular material's layout system. To see what I have done so far, please refer to my jsfiddle linked below: Jsfiddle Below is the HTML code snippet. Any guidance ...

Is it possible to store an HTML element tag in a variable?

I've been learning JavaScript on w3schools and freecodecamp, but I stumbled upon something in w3schools that has me puzzled. Can someone please explain why this particular code snippet works? The variable "text" is declared as containing the string " ...

I'm looking for a solution to correct the array output from my function in node

I have a function that is currently functioning, but I am in need of proper array sorting. First, I will display my code, followed by the current output and then the desired output. Can someone help me edit my entire code and output? var app = require(&a ...

What is the best way to add table pagination at the bottom of a table?

Can someone provide guidance on implementing table pagination for the material-ui table below? The documentation is a bit unclear: <Table ria-label="a dense table"> <TableHead> <TableRow> ...