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

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

position:fixed;
top:0;
width:100%;
margin:10px 0px;
height:60px;

есть кнопка в этой шапке, по нажатию которой нужно плавно снизу вывести меню с такими же стилями (главное что бы width:100%; и height:60px;)
обработчик нажатия кнопки я сам повесил (toggleClass)
Изначально меню должно быть например (opacity:0;bottom:0;z-index:-1;) по нажатию добавиться стиль в котором будет (bottom:-60px;opacity:1;), плавности добавит transition

Но у меня пока толкового ничего не выходит, может кто подскажет как правильно сделать?

Доброго времени суток, есть блок ширина которого указана в процентах, внутри него есть такая конструкция

<div class="block">
  <a href="#"><i class="vk"></i></a>
  <a href="#"><i class="ok"></i></a>
  <a href="#"><i class="gp"></i></a>
  <a href="#"><i class="fb"></i></a>
  <a href="#"><i class="in"></i></a>
  
  <a href="#" class="fullwidth">Link</a>
</div>

элемент с классом fullwidth всегда по ширине в 100%

нужно сделать что бы вс элементы без этого класса были inline-block (аля only vertical) и квадратные при условии что их может быть больше или меньше чем сейчас.

Очень странно, еще вчера инпат корявило, сегодня же все нормально и это при условии что demo.css подключен.
Может я мало знаю о кешировании? странно...

Страница с проблемой

В коносли вижу как добавляются стили для этого инпата, но вот только указывает не на файл типа style.css или demo.css
а отдельно <style>...</style> хотя если на него нажать в консоли перескакивает именно на файл "demo.css"
З.Ы. На сайте мешающий стиль имеет название engine.css

Доброго времени суток, для начала объясню проблему.
Есть страница к которой подключается 2 стиля с помощью <link href="...
один demo.css другой style.css
на странице есть <input type="search"...
Так вот его изначальный стиль задан в style.css
но если demo.css оставить подключенным то стиль input'а наченает меняться и это при том, что в demo.css я прошелся поиском вдоль и поперек на предмет input, search или классов и id которые могут быть затронуты. Но ничего!!!! Ничего не должно изменять этот инпат, но проблема решается отключением demo.css стили нормализуются, как понять?
 

<div class="cd-filter-block"><h4>Поиск</h4>
  <div class="cd-filter-content">
    <input type="search" placeholder="По названию...">
  </div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->

Вот код инпата
А тут ссылка на 2 стиля:
demo.css и style.css

Может это уже хамство или выглядит банально, но я не могу ничего понять, может сплю еще...