Подскажите как эту форму ( как ссылка) вставить в картинку чтобы клиент нажимал не на ссылку ., а на картинку --> чтобы появлялась форма обратного звонка Код: <style> #mail {visibility: hidden;} #mail:checked ~ #popup form {visibility: visible;} #mail:checked + label { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99; color: rgba(0,0,0,0); background: rgba(180,180,180,.9); cursor: pointer; } #popup { visibility: hidden; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 100; } #popup form { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: .5% 1% 1%; border: 1px solid rgb(100,100,100); font-size: 140%; font-weight: 600; text-align: right; text-shadow: -1px -1px #666; color: rgb(240,240,240); background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170)); } #popup div:nth-of-type(1) {padding-top: 3%;} #popup div:nth-last-of-type(1) {padding: 1% 0 4%;} #popup div:after { content: attr(data-title); display: block; font-size: 70%; font-weight: normal; text-shadow: none; } #popup input {font-size: 90%;} #popup [type='submit'] {cursor: pointer;} #popup label:hover { color: #dbeaf9; cursor: pointer; } </style> <input type="checkbox" id="mail"/><label for="mail">заказать звонок</label> <!-- Для того, чтобы label шёл не сразу после input, нужно менять немного селекторы: ссылка1, ссылка2 --> <div id="popup"> <form method="post" action="mail.php"> <label for="mail" title="Отменить">✕</label> <div data-title="Например, Мария Петровна">Ваше имя: <input type='text' name='name' required /></div> <div data-title="Например, 89270000000">Моб. телефон: <input type="tel" name='tel' required maxlength="11" value='8' pattern="8\d{10}"/></div> <input type='submit' value='Заказать'/> </form> </div>
У меня сделано так: нужно подгрузить .js файл с примерно таким содержанием Затем вставить в код страницы это:
