Jump to content

karakymg

Newbie
  • Posts

    6
  • Joined

  • Last visited

Everything posted by karakymg

  1. Доброго времени суток, помогите сообразить конструкцию. Есть ссылки, например: <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. Доброго времени суток. Есть шапка, ее стили: 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 Но у меня пока толкового ничего не выходит, может кто подскажет как правильно сделать?
  3. Доброго времени суток, есть блок ширина которого указана в процентах, внутри него есть такая конструкция <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) и квадратные при условии что их может быть больше или меньше чем сейчас.
  4. Очень странно, еще вчера инпат корявило, сегодня же все нормально и это при условии что demo.css подключен. Может я мало знаю о кешировании? странно...
  5. Страница с проблемой В коносли вижу как добавляются стили для этого инпата, но вот только указывает не на файл типа style.css или demo.css а отдельно <style>...</style> хотя если на него нажать в консоли перескакивает именно на файл "demo.css" З.Ы. На сайте мешающий стиль имеет название engine.css
  6. Доброго времени суток, для начала объясню проблему. Есть страница к которой подключается 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 Может это уже хамство или выглядит банально, но я не могу ничего понять, может сплю еще...
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy