Displaying a pop-up to reveal what lies in the background

Whenever I display a popup, the decorative circle appears. I am unsure of how to address this issue.

Here is the fiddle link:

some code
https://jsfiddle.net/MagikMike/pctb9e0n/

Appreciate any help, thank you!

htmlcsspopup

Answer №1

Assign IDs to your circles. For example, I have added IDs circle0 and circle1 to both circles -

<div class="overlay" id="popup1"><div class="popup" id="popup"></div></div>

<div class="userMonitoringTarget">
  <div class="circle1" id="circle0">
    <div class="circle2">
      <div class="circle3">
      </div>
    </div>
    <div class="rectangle"></div>
  </div>
  <span class="dot"></span>
  <div class="userMonitoring">
                <div>
                    <span>
                        Date : 00/00/0000
                    </span>
                    <div>
                        <span>
                            LOREM IPSUM
                        </span>
                    </div>
                </div>
                <div class="userMonitoringAttachement">
                    <img src="/image/icon/icn-plus.svg" alt="+"
                    onclick="show_popup(' . $user->getNum() . ',' . $monitorings->id[$i] . ');return false;">    
                </div>
            </div>
</div>
<div class="userMonitoringTarget">
  <div id="circle1" class="circle1">
    <div class="circle2">
      <div class="circle3">
      </div>
    </div>
    <div class="rectangle"></div>
  </div>
  <span class="dot"></span>
  <div class="userMonitoring">
                <div>
                    <span>
                        Date : 00/00/0000
                    </span>
                    <div>
                        <span>
                            LOREM IPSUM
                        </span>
                    </div>
                </div>
                <div class="userMonitoringAttachement">
                    <img src="/image/icon/icn-plus.svg" alt="+"
                    onclick="show_popup(' . $user->getNum() . ',' . $monitorings->id[$i] . ');return false;">    
                </div>
            </div>
</div>

To ensure your circles are hidden when the pop-up is displayed, you need to target them in your JS code and set their visibility to hidden based on the assigned IDs.

function hide_popup()
{
   setTimeout(function()
   {
       document.getElementById('popup1').style.visibility = "hidden";
       document.getElementById('popup1').style.opacity = 0;
       document.getElementById('popup').innerHTML = "";
    }, 100);
}
function show_popup( user, monitoring )
{
    document.getElementById('circle0').style.visibility = "hidden";
    document.getElementById('circle1').style.visibility = "hidden";
    document.getElementById('popup1').style.visibility = "visible";
    document.getElementById('popup1').style.opacity = 1;
}

Answer №2

To ensure your popup wrapper displays correctly, it is important to include a z-index.

#popup1 {
  z-index: 999;
}

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

Is it possible to alter HTML content dynamically by searching with JavaScript?

When I utilize a search function to find contact information for individuals, initially there are four contacts listed: 1)"Jonathan Buell", 5804337551, "family" 2)"Patrick Daniel", 8186934432, "work" 3) "Lorraine Winter", 3138211928, "work" 4) "Constan ...

javascripthtmlcss

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

javascriptjqueryhtml

Viewport height-responsive image not functioning as expected in Firefox browser

Is there a way to set an image to the 100% height of the browser window, with a small padding at the bottom, and have it centered on the page? I created an example in codepen that works well in Chrome and Safari, but not in Firefox. In Firefox, the image ...

imagefirefoxresponsive-designcss

Trouble with SCSS Nesting

Can anyone help me with styling an H3 and a p tag within a div? I'm facing an issue where the p tag is not being styled in this code block: .marketing-single-page-titles{ h3 { margin: 0; padding: 0; p { margin: 0; padding: 0; position: rel ...

htmlcsssass

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

Tips for inserting CSS into Django's UpdateView or CreateView forms

I have a project on the go, and the designer has handed me the design. I need to replicate the input forms from the design, which requires adding CSS to my form object. If I am using a Django class-based view, how can I add custom CSS to the form fields l ...

pythoncssdjangodjango-formsdjango-views

Is there a way to implement CSS transitions when hiding elements?

My bootstrap navbar collapses and displays items outside of it. However, when I hide the menu, the overlay div disappears immediately and does not transition smoothly with the menu. How can I apply a transition to the div when hiding the menu? I've t ...

cssreactjsbootstrap-4

What could be causing the background rainbow animation to malfunction?

.colorful { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: change 10s ease-in-out infinite; } @keyframes change-color { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 10 ...

css

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

I'm attempting to achieve something along the lines of, |--------------Empty space---------------|-----first column(aligned to the right)-----| |---logo---||------Empty space-------|----second column(aligned to the right)---- However, it is automat ...

htmlcsstwitter-bootstrap

Establishing connections between HTML and CSS files

After writing my html and css code, I noticed that the files are not linking properly. Despite checking for errors, I couldn't find any issues within the codes. Here is a snippet of my html file: <!DOCTYPE html> <html lang="en" dir= ...

htmlcss

Creating uniform-sized flex items with varying image sizes

When setting flex: 1 1 0 on flex items, it does not work as expected especially when the flex items contain images of varying sizes. In this scenario, the flex-item containing the image ends up becoming significantly wider than the others. Below is the H ...

htmlcssflexbox

Choose solely the initial and concluding hyperlink within the divs

The structure I am working with is as follows: <div class="navigation_sub_item_background" id="sub_nav_2"> <div class="navigation_sub_item" id="2_1"> <a class="navigation__sub__link" href="?p=2_1"> <span> ...

htmlcsscss-selectors

What is the best way to eliminate the "#" symbol from a URL?

I'm currently updating a website that features a hash symbol in every link when switching pages. This causes the page to not refresh everytime I switch, instead it stays on the last position of the site. Where can I locate the code responsible for th ...

javascripthtmlcsstypescriptvue.js

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Currently, I am utilizing rulerguides.js in my project. I have customized it for a specific div to display rulers and grid lines. You can refer to this FIDDLE. The rulers are functioning properly, but the draggable grid lines are being calculated based on ...

javascriptjqueryhtmlgridlinesrulers

showcasing a picture retrieved from an express server

Struggling to incorporate an image from an api into an img tag, unsure of the data type and how to process it for display. The data remains consistent regardless of using pipe() or res.sendFile(). Witness the server in action: app.get('/image', ...

htmlimageexpressbinaryblob

What is the proper way to utilize the script type "text/x-template" in a multilanguage context?

I'm currently working with ASP NET and VueJS. In my ASP NET, I have a view component that looks like this: <script type="text/x-template" id="form-template"> @if (string.IsNullOrEmpty(Model.LastName)) { <in ...

htmlasp.netvue.jskeyboardmonitor

Can anyone recommend an HTML element that is capable of containing spans and supporting editable text within?

Is there a way to combine a span or another container with editable text within the same box, such as one of the boxes on the left side? https://i.sstatic.net/ZBTtn.jpg I am looking to enable users to click directly on the box, input text, and then a ...

javascriptjqueryhtmlangularjs

the best way to transfer a JavaScript value to a PHP page

I am experiencing an issue with an undefined function in my PHP page. I have tried everything and it just doesn't seem to work for me. Can anyone please assist me with this problem? <!DOCTYPE html> <html> <head> <scrip ...

phphtmljqueryajax

Unable to resolve the problem related to <ul> and <li>

I am currently working on integrating a chat snippet into an angular project. The challenge I am facing is that I cannot use jquery components, so I only need the HTML and CSS parts. You can find the original snippet here: After copying it to Codepen, I n ...

htmltwitter-bootstrapcssbootstrap-4