Здравствуйте.
Делаю для нужд сайта мини-менюшку, чтобы по клику на ссылку открывалось окошко с информацией на html, и получаю вот такой косяк.
http://i105.fastpic.ru/big/2018/0614/a4/0fe60df4d7ed33d418048c75b200f9a4.png
Нужно как-то скрыть эти ссылки и текст, дабы открывшееся меню было поверху этого текста, а не за ним. Это реально как-то сделать, например, через css? Код страницы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #zatemnenie { background: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; } #okno { width: 80%; height: 80%; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; } #zatemnenie:target {display: block;} .close { display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; } .close:hover {background: #e6e6ff;} </style> </head> <body> <div id="zatemnenie"> <div id="okno"> <p><strong>Информация об организации представлена в документе:</strong></p> <object data="http://uk-lider.org/Org_info/Organization_Info.pdf" height="400" type="application/pdf" width="700"></object><br> Всплывающее окошко!<br> <a href="#" class="close">Закрыть окно</a> </div> </div> <a href="#zatemnenie">Вызвать всплывающее окно</a> </body> </html>