By
karakymg
Доброго времени суток, помогите сообразить конструкцию.
Есть ссылки, например:
<a href="one.html" target="modal">link 1</a>
<a href="two.html" target="modal">link 2</a>
<a href="three.html" target="modal">link 3</a>
И сам фрейм:
<iframe name="modal" src="0" id="modalfrm"></iframe>
Как по нажатию на ссылку открыть во фрейме ее href="" (при этом оставаться на этой же странице) я сообразил.
Не могу сделать модальное окно с фрейма используя только css
Есть варианты? Хотелось бы увидеть ваш подход к этому делу.
Нашел один из способов сделать модальное окно "CSS Only"
Ссылка открывающая модальное окно:
<a rel="nofollow" title="позвонить" href="#target-content" class="icon icon-phone"></a>
Само модальное окно:
<div id="target-content">
<a href="#" class="close"></a>
<div id="target-inner">
<h2>Тыры пыры трале вале, я модальное окно</h2>
</div>
</div>
И его CSS код:
#target-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0;
transition: 0.5s;
z-index: 999;
}
#target-content:target {
pointer-events: all;
opacity: 1;
}
#target-content #target-inner {
position: absolute;
display: block;
padding: 12px;
line-height: 1.8;
width: 70%;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
#target-content a.close {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
opacity: 0.8;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content a.close:hover {
opacity: 0.4;
}
Но вот незадача, атрибут target="" уже занят открытием модального окна, как же мне тогда во фрейм загрузить страницу указанную в атрибуте href="" ?
Question
kapralpv
Есть сайт с видеоконтентом. Стандартный код плеера по умолчанию выводится через iframe на всех страницах сайта в одном и том же месте (по ID материала). Сразу говорю - да, сайт с фильмами, контент пиратский, надеюсь в 21-м веке это никого не удивит. Дальше по теме - бывает так, что у видеобалансера нет моего фильма и соответственно на моем сайте вместо рабочего плеера выводится пустое место. Вопрос: можно ли реализовать подложку под iframe в виде текста, типа "Видео отсутствует" и т.п. Я пытался создать блок div с текстом на темном фоне с размерами равным плееру, но на рабочих фильмах текст "просвечивается наружу" поверх блока iframe. Можно ли реализовать подложку под блок iframe, которая не была бы видна при наличии плеера и наоборот появлялась при его отсутствии средствами HTML и CSS?
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.