Можем ли мы создать всплывающее окно без Javascript в CSS?

Question

Можем ли мы создать всплывающее окно onclick без JavaScript в CSS?

Answer 1

Нет, вы не можете. Вы должны использовать скрипт, чтобы связать обработчик событий для onlcick.

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

и пользовательский агент решает, следует ли открыть страницу в новом окне или вкладке.

Если вам нужно новое всплывающее окно с нестандартным размером, вы должны использовать

window.open

и вы не можете использовать это без скрипта.

Answer 2

Вы не можете, но вы можете создавать всплывающие подсказки, используя только CSS. Это может сделать трюк :

Вы установили правильную разметку:

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

Затем введите стиль при наведении:

#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;
}

Answer 3

Вы можете использовать CSS для создания всплывающих окон при нажатии использовать css проверенные свойства например,

input:checked {
    height: 50px;
    width: 50px;
}

ты должен быть немного хитрым, используя это. Используйте эту ссылку для лучшего понимания

http://www.corelangs.com/css/box/fulloverlay.html#

Answer 4

Теоретически вы можете подделать его с помощью <button>, :focus и некоторого неприятного кода позиционирования.

... но это будет связано с экстремальными уровнями уродливых хакерских атак.

CSS не предназначен для добавления интерактивности на страницы. Это язык презентации.

Пусть JavaScript обрабатывает пользовательские взаимодействия, вот для чего он нужен (но всегда будьте прагматичны - постепенно улучшайте ).