0

Доброго времени суток, помогите сообразить конструкцию. Есть ссылки, например:

<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="" ?

2
  • зачем вам ставить href , если при нажатии так и так линк открывается как нужно во фрейме
    – L. Vadim
    26 янв 2017 в 14:23
  • Нет что бы "открылось" модальное окно ссылка использует href="" как путь к обращаемому блоку в данном случае по id (href="#target-content") как же тогда фрейм загрузит страницу, если необходимый href="" занят, в нем нет ссылки на локальный html который необходимо загрузить. Еще для SEO важно, что бы href="" нес в себе ссылку на документ а не простое обращение к другому элементу.
    – karakym
    26 янв 2017 в 14:42

1 ответ 1

0

Попробуйте передать нужный атрибут при клике, с помощью jQuery:

$('.Класс_фрейма').attr('src', 'Нужная ссылка');

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.