Do you require a lightbox for a white text box set against a semi-transparent black background?

Currently, I am in the process of developing a Chrome extension that will be compatible with my Android app. As part of this development, I need to code the HTML/CSS for the extension. The main functionality of the extension allows users to add tags to a specific page - similar to what Pocket offers.

I have successfully created the footer design, but I am facing challenges while working on the HTML/CSS for adding tags. I am considering using a lightbox to achieve the desired look. However, I am open to any suggestions or tutorials on how to implement this feature effectively.

Any advice or resources would be greatly appreciated!

htmlcssgoogle-chrome

Answer №1

add 2 div's: Styling with CSS 

/* Custom ID for Overlay */
#custom-overlay {
position absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000; /* or transparent pixel 
opacity: 0.3; /* adjust transparency as needed */
z-index: 1000; /* Ensure it is above your layout elements */
}

/* Custom ID for Lightbox-like Content */

#custom-LBcontent {
position relative;
top: 200px;
width: 600px;
height: 300px;
background: #fff;
margin: auto;
z-index: 2000; /* Should be higher than overlay */

}

No need for a lightbox

Regards

T

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

Refresh an image on my webpage using jQuery

There seems to be an issue on my page where one of the images only displays after reloading the page. Initially, the image only loads partially. The reason behind this behavior is still unclear to me. I've been attempting to reload only the image on ...

jquerycsshtml

Cannot get the input padding override to work in MUI autocomplete

I've been attempting to modify the padding within the MUI autocomplete component, but unfortunately, it doesn't appear to be functioning correctly const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; const checkedIcon = ...

htmlcssreactjsmaterial-uiautocomplete

What is the best way to combine a string with a variable in sass?

Is there a way to merge a string and a variable in Sass to form a variable name that is already present? $size: "sm"; $button-sm: 1rem; $buttom-md: 1.5rem; body { font-size: $button-#{$size}; } The desired output is: body { font-size: 1r ...

javascripthtmlcsssass

Tips for adding event listeners to dynamically-loaded content using AJAX

I need help with the following code snippet: $("#contantainer").load("some_page.txt"); Inside some_page.txt, I have the following content: <div class="nav"> <ul id="nav_ul"> <li><a class="nav_a" href="#home" id="home"> ...

javascriptjqueryhtmlajax

CSS problem: Footer encroaching on the content above

For more information, please visit this link When the window is minimized, the footer overlaps the content above it. Despite spending hours trying to fix this issue, I have not been successful. View when maximized: here View when minimized: here Even af ...

cssoverlap

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

Having difficulty sizing specific <td> elements in an HTML table

Is there a way to increase the size of a TD cell without adjusting the height of the entire row? I tried using inline styling with "rowspan= 7", but it only centers the data in the middle of the cell. I am attempting to create a table similar to the one s ...

htmlcsshtml-tablebootstrap-table

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

htmlcakephponchange

What is the best way to achieve complete transparency for an input element?

Is there a way to make the input element completely see-through, allowing the body background image to show through instead of the parent's background color? Sample HTML code: body{ background-image:url("https://upload.wikimedia.org/wikipedia ...

htmlcsstransparency

Enhancing SEO for slideshow presentations

I've been thinking about the SEO implications of using a slideshow. For content that hasn't been displayed in the slideshow yet, I'm keeping it hidden in a div. While this content will still be indexed, search engines (especially Google) ma ...

htmlseo

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

htmlcss

Annoying animation triggered upon loading of the page using AngularJS

I'm encountering an issue with a webpage element that has a hide/show animation. Despite the initial state being hidden, when the page loads, it still displays the hide animation. I attempted to set ng-show="false", but the hide animation persists upo ...

htmlangularjscss-animations

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

What is the best way to make my <div> element expand to fill the entire width of the screen? I attempted setting the width to 100%, but it didn

I need help creating a <div> that spans the entire width of the screen. In my CSS, I have this code: #spacer3 { width:100%; height:300px; } Although it seems like it should work, the div is not extending all the way to the edges of the screen on ...

csshtmlwidthfullscreen

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am tr ...

javascriptcssreactjs

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

HTML: <html> <head> <body onload="document.getElementById('a').style.display='block';"> <div id="a" align="center" onclick="document.location.reload();" style="display: block; cursor: pointer;"> <img width="9 ...

javascripthtmlcssseleniumselenium-webdriver

How to maintain HTML list items in a single line while overlaying text

I'm seeking assistance with understanding how to solve a particular issue. I have multiple list elements with varying lengths of text content, each flanked by small images/icons on either side. Below is an example of the HTML structure: .truncate ...

htmlcss

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

How can I add a drop-down list to a cell within a table?

Can a drop-down list be added into a table cell? Thank you! Here is an excerpt of the code: $sql_query="SELECT nameOfwarning FROM warnings"; $sodss=mysqli_query($d,$sql_query); if (mysqli_num_rows($result)<1) ?> <select name = "warnings"> ...

phphtmlcss

Why did my compilation process fail to include the style files despite compiling all other files successfully?

As English is not my first language, I kindly ask for your understanding with any typing mistakes. I have created a workspace with the image depicted here; Afterwards, I executed "tsc -p ." to compile my files; You can view the generated files here Unf ...

javascriptcssreactjstypescriptless