Как сделать чтобы при нажатии на кнопку появлялся блок

Появляется блок при нажатии на кнопку

Как сделать что бы при нажатии на кнопку появлялся блок в центре экрана.

 
 
Заказать счет 
 
Заказать счет 
 
Заказать счет 
 

Имеется три кнопки,у каждой кнопки при нажатии должен появляться блок с разной информацией. Кому не трудно могли бы поподробнее расписать все?

Отслеживать

5,980 1 1 золотой знак 20 20 серебряных знаков 26 26 бронзовых знаков

Как при нажатии кнопки получить блок div?

Как сделать так, чтобы при нажатии на «кнопку» на сайте под кнопкой появлялся блок DiV с готовым текстом каким-либо?

Отслеживать
задан 13 дек 2017 в 14:23
Vaagn Akopyan Vaagn Akopyan
429 1 1 золотой знак 4 4 серебряных знака 17 17 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

У блока, который ты хочешь открывать ставишь display: nonе. При помощи js ставишь обработчик на кнопку, который при нажатии изменяет display: none на display: block. Что-то типа этого:

function viewDiv()< document.getElementById("div1").style.display = "block"; >;

#div1

 
Блок

Отслеживать
ответ дан 13 дек 2017 в 14:38
58 6 6 бронзовых знаков
fixed -то зачем? о_О
13 дек 2017 в 14:50
@Qwertiy случайно написал. Сейчас изменю. Спасибо.
13 дек 2017 в 14:53

А почему onmousedown ? Т. е. 1. почему такая устаревшая форма добавления обработчика? и 2. почему mousedown вместо click?

13 дек 2017 в 14:57
Если не сложно, то можете реализовать актуальную форму обработчика?
14 дек 2017 в 17:35

Вот тоже интересный пример(Jquery)

$('.btn').click(function()< $(".block_with_text").fadeToggle(100); >); 

 Кликни по мне 
Lorem ipsum dolor sit amet

Отслеживать
ответ дан 14 дек 2017 в 16:06
651 4 4 серебряных знака 13 13 бронзовых знаков

Как вариант, можно и без js обойтись, это зависит от конкретной задачи и возможностей. Например, с помощью скрытого чекбокса и метки, которая будет выступать псевдокопкой, переключать видимость DIVа:

.text, input[type="checkbox"] < display: none; >input[type="checkbox"]:checked ~ .text < display: block; >/* Стилизация псевдокнопки */ .btn

"Кнопка" 
Готовый текст

Добавление блока при нажатии на кнопку

Как сделать, чтобы при нажатии на кнопку появлялся еще один такой блок.

methods: < AddAudit() < this.bsaInfo.worker_info.push(' '); >>

 
Нарушитель       Добавить + 

Один из вариантов.

var addAudit = function() < var elemKod = document.querySelector('.in-kod').innerHTML; var elemOutKod = document.querySelector('.out-kod'); elemOutKod.innerHTML += '
' + elemKod + '
'; >; document.onclick = function() < var elem = window.event.srcElement; if (elem.className === "btn") < addAudit(); >>;

 Нарушитель        Добавить+ 

new Vue(< el: '#app', data: < arr: [], name: '', rank: '' >, methods: < add() < this.arr.push(< name: this.name, rank: this.rank >) > > >)

 
 Нарушитель        Добавить+ 
Список:
 
Имя: >, Должность: >, ID: >
 
 

• Почему SERVER_ADDR имеет не тот IP 46711 visits
• Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30295 visits
• Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22866 visits
• Как через css изменить цвет png изображения? 10171 visits
• Blob video url download 9804 visits
• Php curl запрос через прокси с авторизацией 9062 visits
• Работа с captcha vk api 7980 visits

Как плавно скролить страницу по якорям колёсиком мышки jquery?

Есть проблема запуска этого кода на c# и oracle

выходит ошибка OracleManagedDataAccess

Как сгенерировать xpriv, xpub ключи и адреса btc c#

Где-то неделю назад начал изучать c# и столкнулся с задачей по генерации bip39 из мнемонической фразыНе могу найти подходящий материал, который.

Как добавить annotains в chart?

Есть у меня гистограммаСтоит задача добавить значение непосредственно в середину прямоугольников

Как сделать при нажатия на кнопку появления блока?

Ребята прошу помощи, у людей которые имели опыт с такими фишками, как сделать что бы при нажатии на блок появлялся блок , а при нажатии на пустое место пропадал, и блок должен открываться всегда слева как на картинки , прошу помощи)

• Вопрос задан более трёх лет назад
• 254 просмотра