Задать вопрос

Модальное окно на css3 лучше или js ?

Жду ваших комментариев. Буду рад любой критики.

<!DOCTYPE html>
<head><meta charset="utf-8"><title></title>
<style>
.win {
    position:fixed;z-index:3;
    font-family: Arial, Helvetica, sans-serif;
    top:0;right:0;bottom:0;left:0;
    background:rgba(0,0,0,0.8);
    display:none;
    pointer-events:none;
	}
	.win:target {
		display:block;
		pointer-events:auto;
	}

	.win div{
		width:400px;
		position:relative;
		margin:10% auto;
		padding:10px 20px;;
		border-radius:10px;
		background:#fff;  
	}
	.close {
		background:#aaa;
		color:#fff;
		line-height:25px;
		position:absolute;
		right:-12px;
		text-align:center;
		top:-10px;
		width:24px;
		 
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		 
	}
	.close:hover { background: #10ff34; }
</style>
</head>

<body>

<a href="#home">модальное окно</a>
<div id="home" class="win"><div><a href="" title="Закрыть" class="close">x</a><h2>name</h2><p>text</p></div></div>


</body>
</html>


Вопрос, можно полагаться на такой вид модальных окон или лучше делать по старинке с js?
На дизайн не смотрите, по минимуму )
  • Вопрос задан
  • 3223 просмотра
Подписаться 5 Оценить Комментировать
Решения вопроса 1
hadra
@hadra Автор вопроса
Кто не боится ,тому подойдут окна на css3.
А кто еще опасается, вот вам старый совет:
Используйте checkbox и все будет норм.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
css-tricks.com/on-target - обратите внимание на описание возможных проблем с этим псевдоселектором.
Ну и если вам нужна поддержка ie8 и ниже, всеравно прдется использовать js (хотя есть полифилы и шимы). Ну и все зависит от контекста. Скажем если у нас идет речь о приложении, которое зависит от кэша страницы, могут возникнуть проблемы.
Ответ написан
algreenzer
@algreenzer
Я в этом шарю
Я считаю, если можно написать на CSS не прибегая к js ухищрениям, то почему нет.

Вот есть красивый способ реализации, ничего лишнего: habrahabr.ru/post/136351
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы