Kioskea
Recherche
Ask a question »

CSS - Create a pop-up (no JavaScript)

March 2015


Popup in CSS without Javascript






Here's how to create a popup in CSS, without making use of JavaScript

Use :hover to switch CSS when moving the cursor.
Among the modified CSS attributes, use display:none to hide/show the popup, depending on the position of the cursor.

A popup with a link


The content of the popup is placed in a <span> tag within the <a> tag
Here is the CSS code to add in the <head> your html file or in a separate CSS file:
a.info 
{ 
    position:relative; 
    z-index:24; background-color:#ddd; 
    color:#000; 
    text-decoration:none 
} 

a.info:hover {z-index:25; background-color:#ff0} 

a.info span{display: none} 

a.info:hover span 
{ 
    display:block; 
    position:absolute; 
    top:2em; left:2em; width:10em; 
    border:1px solid #0cf; 
    background-color:#555; color:#fff; 
} 


The HTML code to be inserted in your webpage:

    Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>. 


The results:

Without cursor:


With cursor:

A popup without link


If you just want to make a popup without any link, you can put href="#" in your <a> tag, but some browsers consider that "#" is a link to the top of the page.

To counter this, replace the <a> tag with a <span> tag (in HTML and CSS).
span.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    cursor: pointer;
}
For unlimited offline reading, you can download this article for free in PDF format:
Css-create-a-pop-up-no-javascript.pdf

See also

In the same category

Published by jak58 - Latest update by deri58
This document entitled « CSS - Create a pop-up (no JavaScript) » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.