Всплывающее окно на кнопки
Как сделать чтобы такое же всплывающее окно которое выводится при наведение на кнопку 1 выводилось и при наведение на кнопку 2.При наведение на кнопку 1 пишется кнопка 1 а при наведение на кнопку 2 пишется кнопка 2.
function v45() < bt11 = document.createElement('BUTTON'); // создание кнопки bt11.id = 'cmd6'; // её id bt11.textContent = 'Кнопка 2'; // её текст document.body.appendChild(bt11); // нужно для добавления var a = 6; var b = 2; bt11.title = 'количество очков ' + a + " " + b; bt11.onclick = function() < // функция при клике на неё >> v45();
#i-have-a-tooltip < width:350px; font-family:Helvetica,Arial,sans-serif; font-weight:100; font-size:20px; text-align:center; padding:50px; margin:100px auto; background:white; position:relative; border-radius:5px; box-shadow:10px 10px 0px rgba(0,0,0,.05); >#i-have-a-tooltip:before < content:attr(data-description); box-sizing:border-box; display:block; background:rgba(0,0,0,.7); color:white; padding:20px; position:absolute; left:50%; top:-30px; margin-left:-100px; width:200px; height:65px; line-height:25px; border-radius:5px; opacity:0; transition:.25s ease-in-out; >#i-have-a-tooltip:after < content:''; display:block; position:absolute; top:35px; left:50%; margin-left:-8px; height:0; width:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid rgba(0,0,0,.7); transition:.25s ease-in-out; opacity:0; >#i-have-a-tooltip:hover:before < opacity:1; top:-50px; >#i-have-a-tooltip:hover:after
Кнопка .
1. Как сделать всплывающее окно в html
Для создания всплывающего окна в HTML можно использовать тег и стили CSS.
- Сначала создадим блок , который будет содержать всплывающее окно:
class="popup"> - Добавим стили для этого блока. С помощью CSS зададим ему размеры, позицию, цвет фона и прозрачность:
.popup position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #fff; border: 1px solid #000; opacity: 1; z-index: 9999; > - Добавим кнопку, при нажатии на которую будет открываться всплывающее окно:
onclick="openPopup()">Открыть всплывающее окно - Создадим функцию openPopup() , которая будет открывать всплывающее окно. В этой функции мы будем получать доступ к блоку и задавать ему свойство display: block; , чтобы он стал видимым:
function openPopup() var popup = document.querySelector('.popup'); popup.style.display = 'block'; > - Для того чтобы закрыть всплывающее окно, добавим кнопку «закрыть» и функцию closePopup() , которая будет скрывать блок :
class="popup"> onclick="closePopup()">Закрыть function closePopup() var popup = document.querySelector('.popup'); popup.style.display = 'none'; > Как сделать всплывающее окно в html
Для создания всплывающего окна в HTML можно использовать тег и стили CSS.
- Сначала создадим блок , который будет содержать всплывающее окно:
class="popup"> - Добавим стили для этого блока. С помощью CSS зададим ему размеры, позицию, цвет фона и прозрачность:
.popup position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #fff; border: 1px solid #000; opacity: 1; z-index: 9999; > - Добавим кнопку, при нажатии на которую будет открываться всплывающее окно:
onclick="openPopup()">Открыть всплывающее окно - Создадим функцию openPopup() , которая будет открывать всплывающее окно. В этой функции мы будем получать доступ к блоку и задавать ему свойство display: block; , чтобы он стал видимым:
function openPopup() var popup = document.querySelector('.popup'); popup.style.display = 'block'; > - Для того чтобы закрыть всплывающее окно, добавим кнопку «закрыть» и функцию closePopup() , которая будет скрывать блок :
class="popup"> onclick="closePopup()">Закрыть function closePopup() var popup = document.querySelector('.popup'); popup.style.display = 'none'; > При простом клике на кнопку всплывает окно, а при клике на кнопку формы — нет
Есть форма заказа, результат которой обрабатывается без перезагрузки страницы в результате действий которой должно появиться всплывающее окно, сигнализирующее об успешном выполнении. Вопрос: почему при нажатии на простую кнопку оформление всплывающее окно открывается, а при нажатии на кнопку submit нет? вот фидл
$(".confirmation").click(function() < $(this).magnificPopup(< items: < src: '#confirmation', type: 'inline' >>); >); $('#form_id').submit(function() < $.ajax(< type : 'POST', url : '/my-account', data : $("#form_id").serializeArray(), success: function () < $(".confirmation").magnificPopup(< items: < src: '#confirmation', type: 'inline' >>); alert('sucsess');// проверяем работу скрипта в случае успеха >, error :function() < alert('fail');// проверяем работу скрипта в случае неудачи >>); >); https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css Результат
Имя
Пароль
Сертификат №