Tips for incorporating a hyperlink into a pop-up box

I need some assistance with adding a link to a pop-up window. Here's the HTML code I currently have:

HTML

<div id="popup"> 
<a href="#"><div id="popup-headline">News 1</div><div id="local">News Author</div>
<div id="date">| May 24, 2016</div><span><strong>News Text</strong><br /><br />News Text</span></a>
</div>

CSS

#popup { color: #000; background-color: #fff; }

#popup a, #popup a:visited {
    position: relative;
    display: block;
    width: 100%;
    line-height: 15px;
    text-align: left;
    padding: 0;
    padding-bottom: 5px;
    margin: 0;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    font-size: 1em;
    font-weight:normal;
    color: #0088cc;
}

#popup a span {
    display: none;
}

#popup a:hover { 
    background-color: #fff; 
}

/* IE correction rule */
#popup a:hover  {
    color: #005580; 
    background-color: #fff;
    text-indent: 0; /* added the default value */
}

#popup a:hover span {
    display: block;
    position: absolute;
    border:4px solid #ddd;
    top: 4px;
    left: 60px;
    width: 226px;
    margin: 0px;
    padding: 8px;
    color: #005580;
    font-weight: normal;
    background: #fff;
    text-align: left;
    z-index: 2;
    overflow: hidden;
}

#date {
    color: #999;
}

#popup-headline {
    margin-top: 15px;
    line-height: 15px;
}

#popup-headline-2 {
    margin-top: 5px;
    line-height: 15px;
}

#local {
    line-height: 15px;
    float: left;
}

The issue lies in trying to insert an anchor link within the news text section, such as 

<a href="link">Click Here</a>
, which causes the code to break and the link doesn't appear in the pop-up window.

If anyone can provide guidance on whether this is feasible or how I can display links within the pop-up window, I would greatly appreciate it.

Thank you for your help.

You can see this feature on the following website:

On the homepage, navigate to the Local News Section and hover over Branch AGM to see a pop-up window. It's within this window that I'm looking to add a link.

javascriptjqueryhtmlcss

Answer №1

You currently have a link within the popup, but you cannot nest links.

Please remove the existing link and replace it with yours.

#popup { color: #000; background-color: #fff; }

#popup .content, #popup .content:visited {
    position: relative;
    display: block;
    width: 100%;
    line-height: 15px;
    text-align: left;
    padding: 0;
    padding-bottom: 5px;
    margin: 0;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    font-size: 1em;
    font-weight:normal;
    color: #0088cc;
}

#popup .content span {
    display: none;
}

#popup .content:hover { 
    background-color: #fff; 
}

/* IE bug fix */
#popup .content:hover  {
    color: #005580; 
    background-color: #fff;
    text-indent: 0; /* default value added */
}

#popup .content:hover span {
    display: block;
    position: absolute;
    border:4px solid #ddd;
    top: 4px;
    left: 60px;
    width: 226px;
    margin: 0px;
    padding: 8px;
    color: #005580;
    font-weight: normal;
    background: #fff;
    text-align: left;
    z-index: 2;
    overflow: hidden;
}

#date {
    color: #999;
}

#popup-headline {
    margin-top: 15px;
    line-height: 15px;
}

#popup-headline-2 {
    margin-top: 5px;
    line-height: 15px;
}

#local {
    line-height: 15px;
    float: left;
}
<div id="popup"><span class="content">
  <div id="popup-headline">News 1</div><div id="local">News Author</div>
  <div id="date">| May 24, 2016</div><span><strong>News Text <a href="yourlink">Click Here</a></strong><br /><br />News Text</span>
</span></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

Increase the number of columns in ion-grid to a maximum of 24 columns by customizing the ion-grid columns

Can anyone assist me in achieving an ion-grid with 24 columns? I was researching the Ionic page (https://ionicframework.com/docs/layout/grid) and came across the property "--ion-grid-columns" under the "Number of columns" section. Unfortunately, there was ...

cssangularionic-frameworkgrid

A single block in Javascript uses the ternary operator (?:) to make changes to an object and return

Can you modify a dictionary inside the ?: statement and then return the updated dictionary in the same block? For example, something like this: a > b ? <dict['c'] = 'I'm changed', return dict> : <some other code>; I ...

javascript

Transmit a batch of images from Angular to the ExpressJS server using POST method with multer

I am facing an issue with uploading multiple images through an Angular form to my ExpressJS server using a POST request. I have successfully implemented the upload for a single image using multer and FormData, but I am struggling to extend this functionali ...

javascriptnode.jsangularexpressmulter

creating a custom website layout

Currently, I am in the process of developing a website and I am absolutely obsessed with the page design. For instance: I have a page that can be divided into two sections - the left side and the right side. The left side consists of various menus, while ...

jsphtmltiles

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each bu ...

javascriptjqueryhtmlcss

Issue with retrieving data using $_GET in jQuery select2

I am facing a unique situation. Here is the code snippet for select2: $("#tags").select2({ multiple: true, placeholder: "Please enter tags", tokenSeparators: [',', ' '], initSelection : function (element, callback) { ...

phpjqueryajaxjquery-select2

Using relative positioning in CSS causes the div to move to a new line

Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...

htmlcss

Adjusting the angular routerLink based on an observable

When working with HTML in Angular, I am looking for a way to use an <a> tag that adjusts its routerlink based on whether or not a user is logged in. Is it possible to achieve this functionality within a single tag? <a *ngIf="!(accountService ...

htmlangulartypescript

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

javascriptcssreactjstypescriptstyled-components

I am trying to retrieve the checkbox value and assign it to a jQuery variable

Need to Retrieve Checkbox Value in jQuery Variable <input type='checkbox' id='checkbox_to_update' name='checkbox_to_update' value='1'> If the checkbox is checked, you can set it in a jQuery variable like this ...

jquery

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

As I was creating a hosted API that relies on web workers, I encountered an intriguing issue. I am looking for feedback from the community to help me with this. Even though my server has the necessary CORS headers in place to serve the worker JS files and ...

javascripthtmlcorsweb-worker

Which is the better option for setting a title: using .prop or .attr?

I came across a comment that mentioned The suggestion was to utilize the .prop() method instead of .attr() when setting the "title" property in jQuery versions 1.6 or newer. Could someone provide an explanation for this recommendation? ...

javascriptjquery

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

Guide on correctly aligning a Blender animation export with Three.js

After successfully exporting an animation from Blender using the Three.js export utility and adding it to a Three.js scene, I encountered an issue when trying to position it manually. Here is the code snippet I am using for creating the mesh and animation ...

javascriptanimation3dthree.jsblender

Embedding various files onto a webpage using the file attribute

I came across some code that allowed me to add multiple files using a single input element on my page. The code can be found here: However, as someone who is new to JavaScript, I faced difficulties in customizing it to my needs. What I really want is to h ...

javascriptjquery

What's Vue.js error message about unknown action type?

My store was created in store/user.js export const state = () => ({ user: {}, }); export const mutations = { }; export const actions = { AUTH ({commit},{email, password}){ console.log('email, password =', email, password) } }; ...

javascriptvue.jsnuxt.js

Have you ever encountered issues with Promises.all not functioning properly within your vuex store?

I'm currently experiencing an unusual problem. In my Vue project, I have a Vuex store that is divided into different modules. I am trying to utilize Promise.all() to simultaneously execute two independent async Vuex actions in order to benefit from th ...

javascriptvue.jsvuexes6-promisevuex-modules

How can the value of a button be displayed in an input box using an onclick function?

When the button '1' is clicked, it displays the value "1" inside a <!p> tag. However, the second button '2' does not display the value "2" in the input box. Even though both functions are identical. //Function with working func ...

javascripthtmlbuttoninputcalculator

Trouble retrieving key value in HTML with Angular and Firebase

When trying to access the key of an object in my database to navigate to a URL based on it, I am finding that the p.$key value is always undefined. service: getAll(){ return this.db.list('/products').valueChanges(); } component: product ...

htmlangularfirebase-realtime-databaseangularfire2

Activate current event on newly added elements

Is it possible to have both blur and keypress(13) trigger the same action on an appended element? I thought using trigger() would work, but it's not. Hopefully, I'm just missing something obvious. $(document).ready (function() { $("#btn").cli ...

javascriptjquery