What are some ways to prevent popups from being hidden by CSS?

I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in my popup code. You can see the issue here: https://i.stack.imgur.com/CPe7E.jpg. I am also trying to figure out how to open the popup at page load without using JavaScript.

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: auto;
}

/* More CSS code here */

      </div>

      <div class="priv_cont">
        <div class="priv_head">
          <p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
            <I>By continuing to the content you agree with the <a href="#"  style="color:#000;">cookie</a> 
  and <a href="#" style="color:#000;">privacy</a> policies.</I>
          </p>
        </div>
      </div>

Can anyone help me identify the issue and suggest ways to prevent it? I appreciate any input. Thank you in advance for your assistance.

htmlcss

Answer №1

The issue with the code you provided arises from utilizing :hover to display the popup, causing it to appear when the mouse is inside the window and disappear when it's not. It seems unclear why :hover was implemented in this manner. However, using only :target won't function as intended due to the restriction of having just one element matching the :target pseudo-class. Consequently, clicking on any of the showdiv1/showdiv2 links will make the entire popup vanish. A potential solution would involve creating a selector for the popup that corresponds to '__spooky_auth_popup' being the current target as well as either of the showdiv1/showdiv2 elements being the target. This may require restructuring the document and employing more intricate selectors for the showdiv1/2 elements.

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

Can the <br> tag affect the layout in terms of horizontal space?

I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...

htmlcss

Adjusting the height of a card in Reactstrap

I am currently exploring Reactstrap and aiming to ensure a specific Card adjusts according to the size of the window by setting its aspect ratio using percentages rather than pixels. Interestingly, while adjusting the width works as desired, I'm faci ...

htmlcssreactjs

Loading screen while all files and audio are being loaded

My JavaScript code is responsible for displaying and playing audio on my website. Unfortunately, the load time of the page is quite slow. To address this issue, I decided to follow a tutorial on installing a preloader, which can be found at . Although I ...

javascriptjqueryhtmlcssimage-preloader

When the user clicks, retrieve the contents of list p and showcase them in a div

Struggling a bit with jQuery, looking for some assistance. I am trying to extract the text within p class="area-desc" when class="caption" is clicked and show it in class="step-area." Here's the code snippet: <ul id="main-areas" class="group"> ...

jqueryhtml

Tips on restricting dates to be equal to or earlier:

I have written a code to determine if two given dates are equal or not. The code should allow for the current date to be smaller than or equal to the provided date, but it should not allow for it to be greater. var date = '10-11-2015'; var toda ...

javascriptphpjqueryhtmldate

variable containing a combination of left-to-right and right-to-left characters

I am working on a piece of text which contains Hebrew (rtl) and English (ltr) letters. It is a song with chords placed above the words. The issue I am facing has to do with the chords - because the site is rtl, the chords appear messy. Is there a way to h ...

phphtml

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

javacssjavafx

Display a helpful tooltip when hovering over elements with the use of d3-tip.js

Is it possible to display a tooltip when hovering over existing SVG elements? In this example, the elements are created during data binding. However, in my case, the circles already exist in the DOM and I need to select them right after selectedElms.enter ...

javascripthtmld3.jssvg

The slider thumb is not showing up properly on Microsoft Edge

Hey there! I'm experiencing an issue with the range slider's thumb display in Microsoft Edge. It appears to be positioned inside the track rather than outside as intended. Take a look at this snapshot for clarification: https://i.stack.imgur.co ...

javascriptjqueryhtmlcss

Unable to modify the appearance of an HTML element when injected via a Chrome extension

I am currently developing a unique chrome extension that uses Ajax to inject custom HTML into the current tab. This extension appends a <div> element to the body, and now I need to manipulate it using JavaScript. Specifically, I want it to dynamical ...

javascriptjqueryhtmlcssajax

Loading SVG images in advance

I am in possession of around one hundred simple SVG images, distributed among five different image folders. These images are currently retrieved on demand when they need to be displayed, which generally works well but occasionally results in flickering tha ...

javascriptphphtmlcsssvg

Position the label to the right and left of the input field for alignment

I've been struggling to create an input form with labeled using a dl, dt, dd list. I want the first label on the left, the second on the right, and the input in the center. However, no matter what I try, I can't get the second label to align corr ...

htmlcssresponsive-design

How can you include a key event handler that specifically looks out for the Space key being pressed?

When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...

javascripthtml

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

c#cssasp.nettwitter-bootstrappanel

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

javascripthtmlcssimage

Is this loader going through a triple loop?

<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-repeat: no-repeat; background: url('images/page-loader.gif'); } </style> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascripthtmlcsstwitter-bootstrap-3

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Currently, I am working on a project where I aim to develop a customized feature in ng-select. This feature will enable the text entered in ng-select to be appended to the binding item and included as part of the multiselect function. If you want to see a ...

javascripthtmlangulartypescriptangular-ngselect

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

javascriptjquerycss

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...

javascripthtmlangularjsangular-gettext

Hover Effects on Facebook Tabs

I am currently facing an issue with implementing CSS-sprite for image-based rollovers within a Facebook Tab page. Strangely, the background images are getting removed by Facebook only when inside a Tab page and not in the main application itself. It seems ...

cssfacebookcss-sprites