Can we create onclick popup without Javascript in CSS?

Question

Can we create onclick popup without Javascript in CSS?

Answer 1

No, you can't. You have to use script to wire an event handler for onlcick.

<a href="Somepage.html" target="_blank">Click me</a>

and the user agent decides whether the page should be opened in a new window or tab.

If you need a new popup window with custom size you have to use

window.open

and you can't use that without script.

Answer 2

In theory, you might be able to fake it with <button>, :focus, and some nasty positioning code.

… but this would involve extreme levels of ugly hackery.

CSS is not designed for adding interactivity to pages. It is a presentation language.

Let JavaScript handle the custom interactions, that is what it is for (but always be pragmatic about it — progressively enhance).

Answer 3

You cannot, but you can create tooltips using CSS only. It can do the trick :

You set a proper markup :

<div id="example">
    Result :
    <a href="#" class="tooltip">
        Article 1
        <span>Article 1's Title, Article 1's description.</span>
    </a>.
</div>

Then style it with hover :

#example { 
    float:left; 
    width:400px; 
    padding:15px; 
    background-color:#FFFFFF; 
}
a {
    background-color:#FFFFFF; 
    color:#000000; 
    text-decoration:underline;
}
a:hover {
    background-color:#ffffff; 
    text-decoration:none;
} /* background-color for IE6*/

 /* hiding the tooltip*/
a.tooltip span {
    display:none; /* if you have accessibility issues, you may choose other hiding tricks*/
    padding:2px 3px; 
    margin-left:10px; 
    width:150px;
}
 /* display on hover*/
    a.tooltip:hover span{
    display:inline; 
    position:absolute; 
    border:1px solid #cccccc;
    background:#ffffff; 
    color: #000;
}