Creating the Modal Window Effect using CSS

My goal is to create a modal window using CSS. I am working on adding a stylish element for users who have JavaScript disabled, which will be displayed using the noscript tag.

Here is what I currently have:

<div id="ns-overlay">
        <section>
            <h1>Example Title</h1>
            <h3>Subtitle Here</h3>
            <p>
                Sample content goes here.
            </p>
        </section>
    </div>

And this is the corresponding CSS:

#ns-overlay{
    width: 100%;
    height: 100%;
    background: rgba(52, 52, 52, 0.5);
    position: fixed;
    z-index: 10000;
    background-image: url('../imgs/ns-overlay.png');
    padding-top: 95px;
}

#ns-overlay section{
    color: #FFF;
    width: 990px;
    margin: auto;
    background: rgba(52, 52, 52, 0.9);
    padding: 10px;
    box-sizing: border-box;
}

#ns-overlay section h1,
#ns-overlay section h3,
#ns-overlay section p{
    padding: 5px;
    background: #126D4F;
    /*background: linear-gradient(135deg,  rgb(11, 104, 73) 0%, rgb(11, 78, 130) 100%);*/
    margin: 5px;
}

#ns-overlay section h1{
    width: 560px;
    background: #126D4F;
}

#ns-overlay section h3{
    width: 510px;
    background: #0B4F82;
}

#ns-overlay section p{
    background: none;
}

View JSFiddle example

I would like the overlay to disappear when the user clicks on it.

cssmodal-dialog

Answer №1

To achieve the desired outcome, consider using the :target pseudo element. Convert the div to an anchor and link it to the designated ID:

<a href="#custom-overlay" id="custom-overlay">
  <section>
    <h1>Custom Title</h1>
    <h3>Subheading.</h3>
    <p>Text content here</p>
  </section>
</a>

Next, specify that #custom-overlay should be hidden when targeted:

#custom-overlay:target {
  display:none;
}

JSFiddle Demo

Answer №2

It seems to me that the CSS won't be effective in handling this particular event. For events triggered by clicks, JavaScript would be more suitable for the task.

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

When the page first loads, the slider is responsive, but it does not adjust

I installed the Moving Boxes plugin and customized it to create a full-width image slider. While it works well when the page loads, I'm facing challenges with making it responsive on resize. It appears that the JS script sets fixed widths upon load, w ...

javascriptjquerycsssliderresponsive-design

How to make a div disappear when hovered using Tailwind CSS

I need help with my code that is not working as expected. I have a set of images displayed as cards, each with text below them. I am trying to hide the text and only show the image using Tailwind v2, but I can't seem to get it right. Here's my co ...

htmlcsstailwind-css

What is the recommended method for incorporating a frontend npm package that includes both CSS and JavaScript?

Recently, I've started using NPM and Gulp in my workflow. Up until this point, I've only dealt with NPM packages that consisted of either only JavaScript or CSS/SASS. Typically, I would either copy the package to a vendor directory to work with i ...

javascriptcssnode.jsnpmgulp

Achieve full height of parent with rotated text

Hey, I've been experimenting with some CSS transforms and I'm having trouble getting this to work properly. Check it out here I'm using Bootstrap 4 to create two columns; an image on the left and text on the right. I want the text to be ce ...

htmlcssflexboxbootstrap-4

Display initial messages at the bottom of a DIV, with subsequent messages moving upwards

My Chat DIV is designed to send and receive messages. Currently, messages appear at the top of the DIV and move downwards (as shown in red). Once they reach the bottom, they are pushed upwards using the jQuery snippet below: .scrollTop(activeConversation ...

jqueryhtmlcss

The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

I can't figure out why my carousel isn't working. The id of the carousel is showing up in the webpage's address, which usually happens when the 'bootstrap.js' file is missing, but I have included it. Can anyone help me troubleshoo ...

javascripthtmlcss

Using Selenium to effectively manage changing data in a pop-up dialogue box

Scenario: In a modal window, there is a list of items with a star icon to add selected items to favorites. I want to randomly add a few items to favorites and then confirm if they were successfully added. My approach: To achieve this, I am using a filteri ...

javaseleniummodal-dialogdynamic-data

Creating a specific type of table using Ruby on Rails

Is it feasible to create a table with two columns, where the left column incorporates multiple rows with a scroll bar, and the right column contains a large box housing buttons that alter based on the selection of blocks in the left column? ...

javascriptcssruby-on-railsruby

The Next.js Image component does not implement the maxWidth attribute

<Image src="/assets/blog/image.webp" style={{ maxWidth: "700px" }} width={1400} height={1400} /> Issue Detected The image with src '/assets/blog/image.webp' has the following styles applied, but they are being overwrit ...

cssreactjsnext.js

Challenges with creating a responsive YouTube iframe using the API

Looking to integrate a Youtube video using the iFrame API to capture events effectively, embedding the player alone is not an option. Following the documentation, everything functions correctly with code like: var tag = document.createElement('scrip ...

javascriptcssiframeyoutubeyoutube-api

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

javascriptjqueryhtmlcss

Tips for organizing child cards within a parent card using Bootstrap

I'm trying to set up my child card within the parent card to look like the image provided. I'm using Bootstrap 4 and the card_deck class. https://i.sstatic.net/ihWrb.png However, I'm facing difficulties in getting the layout to match the p ...

htmlcsstwitter-bootstrapbootstrap-4

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

What is the best way to generate a unique bootstrap card for every piece of submitted data?

I am trying to figure out how I can create a dynamic bootstrap card for each submitted data. When the form is submitted, a new card will be created and the data will be stored in that card. Each piece of data will be displayed in a column format similar to ...

javascripthtmljquerycsstwitter-bootstrap

Creating a Custom Progress Bar with Bootstrap

I'm encountering an issue with aligning a Bootstrap 3 progress bar vertically within a table cell. While I have successfully aligned other cells to the middle, the progress bar still remains in its original position. How can I eliminate the excess spa ...

htmlcsstwitter-bootstrap

Progress Bar HTML with PHP

Looking for a way to enhance user experience on a website form that utilizes PHP for data submission? How about incorporating a progress bar that visually indicates the form is processing in order to prevent users from clicking the button multiple times af ...

phphtmlcss

Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content with ...

javascriptjqueryhtmlcssajax

Is it possible to switch the background-image after a gif has finished loading?

I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play. After reading several similar discussions, I understand that you can manipulate elements with JavaScript once the ...

javascripthtmlcssimage

Displaying text within an HTML table featuring a vibrant background

I'm having trouble printing a basic certificate that is formatted as an HTML table. There are a couple of frustrating issues I'm facing. 1) When I try to print the table using Chrome, my CSS changes are not being applied. 2) I can't seem to ...

javascripthtmlcss

Is there a way in Bower to automatically select only CSS or JS files from an open source project, rather than both, if that is my preference?

Although I suspect the answer, imagine I desire to incorporate the CSS from Twitter Bootstrap without the Javascript. I've set up a gulp script to extract everything from my bower.json file, minimize the JS, compress the CSS, and transfer it to my de ...

javascriptcssnpmgulpbower