What is the best way to display an overlay internal link on top of the current one after it has been clicked

I am looking to create a button that, when clicked, will slide in a different page link and modify the URL to cover 80% of the website, while keeping the previous page in the background. Upon closing, the URL will revert back to the original one.

I have considered several methods to accomplish this, but none of them effectively change the URL of the page, such as:

  • embedding an iframe element
  • overlaying a div element
  • creating a pop-up

For reference, a site that achieves this effect can be found here:

javascripthtmljquerycssoverlay

Answer №1

To accomplish this task, you can utilize any of the methods mentioned above. Just insert the provided Javascript code to change the URL without having to reload the page.

window.history.pushState(state, pageTitle, theUrl);

Learn more about using history.pushState

Answer №2

feel free to reach out if you're interested

.portfolio-overlay {
  width:100%;
  height:100%;
  opacity: 0.75;
  position:absolute;
  background-color:black;
  top:-100%;
  transition: top 0.3s ease-in-out;
  display:block;
    
}
.portfolio-overlay a.demoLink{
    width:100%;
    height:100%;
    position:absolute
}
.portfolio-overlay div {
    position:relative;
  display:inline-block;;
    
}

ul.portfolio-project-image { 
    list-style: none; 
    width:100% 

}

ul.portfolio-project-image li {
    position: relative;
    display: inline-block;
    width:100%;
  height: 100%;
  overflow: hidden;
}

li:hover .portfolio-overlay {
  top: 0;
  display:block;

    
}
.bt4 {
    text-align: center;
    margin-top: 160px;
    font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
}
.bt5 {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
}

.portfolio-project {
    width: 32%;
    height: 373px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    margin-left:15px;
    float:left;
}


.portfolio-project-image{
    width: 100%;
    height: 373px;
}

.portfolio-project-image-one{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
}



.portfolio-project-image-one:hover{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
    display:block;
}

.bt5 a {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
    text-decoration:none;
}
<div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
    <li>
    <p>
    Additional page information
    </p>
        <div class="portfolio-project-image-one"></div>
        <div class="portfolio-overlay"><a class="demoLink" href="#"></a><div class="bt4">facebook</div><div class="bt5"><a href="https://www.facebook.com" class="html5lightbox" data-width="853" data-height="480" title=""> visit facebook</a></div><div class="bt6"></div></div>
    </li>
</ul>
</div>
</div>
</div>

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

JavaScript implementation of Twitter OAuth authentication

I searched far and wide for a strong example of a JQuery ajax call to authenticate a user on Twitter using their OAuth method. I carefully followed the instructions multiple times and this is what I've managed to put together so far. Currently, I am f ...

javascriptjqueryajaxtwitteroauth

The expiry date of the cookie remains unchanged

When attempting to create a cookie and specify an expiration date, I am encountering an issue where it remains as "Session". This problem is occurring in Google Chrome. I'm looking for insights on what might be causing this behavior. The code snippe ...

javascriptcookiesexpired-cookies

Improving React Efficiency: Should You Utilize Memoization of Axios GET Request Using useMemo or useCallback?

My Objective: I am currently working on a sizable function named getUnitedStatesCases, which involves making an Axios GET Request and performing various operations with the received data. I have already implemented it within a useEffect hook upon componen ...

javascriptreactjsreact-nativereact-hooks

How to efficiently pass props between components in NextJs

This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...

javascriptreactjsreduxnext.js

Passing a value through jQuery Ajax when selecting an option (onchange) to store in a PHP variable on the same page without

How can I retrieve the selected value using PHP and update a specific div element with it? <div id="test"> <?php if (isset($_POST['sweets'])) { ob_clean(); echo $_POST['sweets']; exit; } ?> ...

javascriptphpajax

Tips for incorporating animation when opening a Jquery SimpleModal

The SimpleModal website features an animation-enabled example with the following sequence: 1. Display modal only 2. Fade in the overlay The code snippet for this animation is as follows: $("#the-div").modal({ onOpen: function (dialog) { dialog.overl ...

javascriptjquerymodal-dialogsimplemodal

What is the best way to eliminate HTML tags from a PDF document?

Looking for help to strip HTML tags? I'm trying to get rid of the HTML tags in my PDF view. Check out the image below and please assist me with this task. This is the code I am using: $string1 = $_POST["editor1"]; $string1 = str_replace("<p>" ...

phphtmlpdf

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

htmlcssflexbox

The onClick event handler is triggered on page load instead of waiting for a click

Recently delving into React, I encountered an issue while attempting to call a function set as a prop. Take a look at my component below: class SamplesInnerLrg extends Component { playSampleAction(sample,sampleId) { console.log(sample); } ...

javascriptreactjsecmascript-6

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...

javascriptangulartypescriptrxjsangular2-observables

Upgrade to Jquery 2.x for improved performance and utilize the latest ajax code enhancements from previous versions

We are encountering a minor issue with Jquery while loading numerous ajax files in our system. Currently, we are using Jquery 2.x and need to be able to operate offline on IE 9+. Previously, when working with Jquery 1.x, we were able to load ajax files fro ...

javascriptjqueryajax

JavaScript event handler for dynamic button click

I am creating a unique button dynamically for each row in a table to handle deletions. I am assigning the id of the button with the key of the row, allowing me to retrieve it later when clicked. Since all buttons share the same function, passing the specif ...

javascriptbutton

What is the best way to utilize a reduce function to eliminate the need for looping through an object in JavaScript?

Currently, my code looks like this: const weekdays = eachDay.map((day) => format(day, 'EEE')); let ret = { Su: '', Mo: '', Tu: '', We: '', Th: '', Fr: '', Sa: '' }; w ...

javascriptarraystypescriptreduce

What is the syntax for accessing a nested object within the .find method?

Currently building an application in node.js. I am struggling with referencing the "email" element in the "userData" object within the Order model when using the find method. Any suggestions on how to properly refer to it? Order model: const orderSchema = ...

javascriptnode.jsmongodbmongoose

Intermittent Cloudfront Content Delivery Network (CDN) disruptions (monitoring) - Implementing CDN Fail

Over the past two months, I've been dealing with sporadic issues involving Amazon Cloudfront. These failures occur 2-3 times a week, where the page will load from my web server but assets from the CDN linger in pending status for minutes at a time. It ...

javascriptajaxcdnfailoveramazon-cloudfront

Error message: The function curl_init() is not defined and cannot be called in the specified file path on line number 102

In the process of creating a fresh project focused on Event Management, I am in need of setting up OTP verification for mobile numbers of users registering for the event. I have been utilizing the textlocal API to send out the OTPs, however, encountered ...

phphtmlone-time-passwordemail-verification

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Can anyone help me with an issue I am facing with a Bootstrap button? Despite using only the btn btn-default classes, when inspecting it in Chrome, multiple classes are being displayed on the button. I'm unable to figure out why this is happening and ...

javascripthtmlangularjstwitter-bootstrap

Is there a way to use jQuery and Ajax to create a dynamic ToolTip that pulls information from a URL instead

Utilizing the code found on this website this.customPreview = function(){ /* CUSTOMIZATION */ xOffset = 10; yOffset = 30; // these variables determine distance of popup from cursor /* END OF CUSTOMIZATION */ $("a.cus ...

jqueryajaxtooltip

Tips for displaying bar chart labels effectively with ChartJS

I am working on an Angular project and I would like to incorporate a barchart using ChartJS. The data for this chart can vary in size, sometimes being very large. One issue I have encountered is that when the number of data points is large, the labels ove ...

javascriptangulartypescriptchart.js

What is the best way to implement a collapsible menu in a fixed sidebar for mobile devices using Bootstrap 4?

I have been searching extensively, but I have yet to come across the precise solution for what I am trying to achieve. Being new to coding, I believe that the answer is probably simpler than I realize. My goal is to develop a sidebar navigation that remai ...

htmlbootstrap-4navigationnavsidebar