Require a warning notification or alert prior to accessing any mature content section on a website

Once upon a time, I stumbled upon a solution online involving javascript that would fade out a webpage until the user clicked Yes or No. If they clicked No, it would redirect them to the front of the site; if they clicked Yes, it would reveal the adult content area. While that specific functionality is not necessary for me now, it would be great if I could rediscover that code. What I do need is a notification to appear on certain pages of my website, prompting users to confirm they are 18 years or older. Upon selecting Yes, they will gain access to the site; selecting No will prevent them from entering. Any assistance in finding this code would be greatly appreciated as my attempts to locate it online have been unsuccessful.

javascripthtmlcss

Answer №1

If design is not a concern, you can experiment with the confirm() method.

let userResponse = confirm("Are you over 18? Do you wish to continue?");

if(userReponse == true){ //Using "userResponse" alone would suffice, but adding " == true " enhances clarity
 //Proceed to adult content
}else{
 //Redirect back to homepage
}

Answer №2

For a recent project, I created a sleek CSS window that appeared when visiting the page. Users were prompted to confirm they were 18 or older by clicking yes or no. If they clicked yes, the window disappeared and granted access to the site. However, clicking no would redirect them back to the main site. To ensure compliance, I expanded the window to cover the entire page, preventing users from bypassing the age verification process. A big thank you to everyone who contributed suggestions - your insights have inspired new additions to my design notes.

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

Transfer grid lines easily by copying and pasting directly from the webpage into a text document

Is there a way to have the grid lines included when copying grid data from a web page? Currently, the copied result looks like this: name subject lolo math fofo history What I would like is: | name | subject | --------------- | lolo | math ...

htmlcssgridmarkup

Preventing PCs from accessing a specific webpage: A step-by-step guide

I am currently using the code below to block phones: if { /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i .test(navigator.userAgent)) { window.location = "www.zentriamc.com/teachers/error ...

javascripthtmlcss

Challenges with arrays that occur asynchronously

At the end of this code snippet where console.log(authors) is called, I noticed that the array seems to be constantly overwriting itself. Typically, in a loop like this, the async part should be outside the loop. To solve the issue of getting an array full ...

javascriptarraysnode.jsasynchronous

Tips for bringing a particular tab into focus when a page initially loads

My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...

javascriptphpjqueryhtml

The Onchange Ajax function successfully retrieves data from the database, but I am unsure how to dynamically update the value of a textarea based on the value

Recently, I've been experimenting with using Ajax calls to fetch values from a database and display them in a text-area. My current challenge is updating the text-area values based on the input in another text-box, which needs to be multiplied by the ...

javascriptphpjqueryajax

Create a variety of elements in real-time

My goal is to utilize JavaScript in order to generate a specific number of input boxes based on the user's input. However, I encountered an issue where using a for loop only creates one input box and then appends this same input box multiple times. f ...

javascriptjquery

Guide on navigating through various HTML pages with distinct parameters using Node.js (Express server)

Seeking assistance with a Node.js server that receives an ID as a query parameter. Each time a client connects with different parameters, I aim to serve them a unique HTML page containing a simple UI with 2 dynamic arrays. Everything seems to be working co ...

javascripthtmlcssnode.js

AngularJS: ng-repeat excluding duplicate keys

Here is a collection of objects I am working with: [{ key:test1 name: name1 }, { key:test1 name: name2 }, { key:test2 name: name3 }] I am currently using ng-repeat to showcase them: <tr ng-repeat=item in list> <td>{{item.key}}</td ...

javascriptangularjs

Revamping jQuery for a React component

As I transition away from using jQuery for quick hides, shows, and CSS changes in favor of React components that require re-rendering without triggering the jQuery actions requiring a page refresh, I find myself needing to set state within each component. ...

javascriptjqueryreactjscomponents

Text does not conform to image boundaries

I've been having trouble with this issue and despite trying various solutions, I haven't been able to figure it out. I'm new to this so it's likely something very simple that I'm overlooking... .container { width: 80%; margin: ...

cssimageword-wrapparagraph

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

javascriptjqueryruby-on-railsajax

Innovative approach to rendering a popup component in Vue.js

I am in the process of developing a VueJS application and facing a particular challenge. I want to show different popups when right-clicking on various components within the app. My main concern is that each component should have its own unique popup. I ha ...

javascriptvue.js

Transforming navigation bar dropdown appearance using solely HTML5, CSS, and jQuery

Currently experimenting with a navigation bar where each component is skewed at -30 degrees. Upon clicking any piece, its corresponding content drops down for display below the clicked item. I am aiming to have the section of the clicked piece expand into ...

jqueryhtmlcss

Creating Dynamic Web Pages with Div Visibility using Javascript

This is my attempt at a simple layout using divs and JavaScript functions to hide and show elements based on button clicks. Function MA should show ADIV and hide BDIV when the "MA" button is clicked. Function MB should show BDIV and hide ADIV when the "M ...

javascripthtmlhide

Tips for resolving conflicts with jQuery on an ASP.NET webpage

On this page, I am using references and scripts for a date time picker and color box. However, only one of them works at a time - commenting out one script allows the other to work. I have tried using jQuery noconflict, but it did not resolve the issue. H ...

javascriptjqueryasp.net

Tips for finding group words within a div panel

Check out this interactive demo I created to demonstrate what I need help with. There are multiple panels containing words, each separated by a line break. I am trying to create a filter that will hide panels that do not match the words entered in the sea ...

javascriptjquerysearchfilter

Automatically generating new lines of grid-template-columns with CSS grid

I am new to using grid in CSS and there are still some concepts that I don't quite understand. Below is the container I am working with: <section class="css-grid"> <div class="css-item"><img src="1.jpg" / ...

htmlcsscss-grid

Is there a way to switch an element across various pages within Ionic 3?

Is it possible to exchange information between two pages using logic? I have successfully implemented a checklist, but I am unsure how to add a success/error icon next to the Room name on the 'verifyplace.html' page after invoking the goToNextPa ...

javascripttypescriptionic3

I attempted to utilize Ajax to invoke my PHP function, but I'm having trouble pinpointing the issue as the code doesn't seem to be functioning correctly

!-- Welcome to the Main Page -- <section class="container"> <div class="row"> <div class="centerlogin"> <div class="frmlogin"> <form role="form" name="signin" id="signin" method="post" action="#"> ...

javascriptphpjqueryajaxajaxform

Structured data for question and answer pages

I've been working on incorporating schema.org tags into my website, specifically for a Q&A page. However, I'm encountering issues when trying to add all three tags within the same HTML page - they seem to be overlapping. My goal is to structu ...

htmlschema.org