Частый посетитель
Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017
Откуда: Германия, Бавария
Помог: 37 раз(а)
|
Pavel8897 пишет:Подскажите пожалуйста, как написать простую функцию для всплывающего окна при нажатии на кнопку.
<form method='post' class='reg-form'; display:none;"> //скрытое окно
<button class="btnind">Начать поиск</button> //кнопка
Добрый день!
Не столь принципиально, но здесь ошибка в коде <form method='post' class='reg-form'; display:none;"> //скрытое окно
видимо Вы хотели написать <form method='post' class='reg-form' style=' display:none' >
2. Если что-то всплывает, то должно и уплывать. Вам нужны две функции.
Можно сделать так:
1. После <body> поставить:
2. CSS
Спойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
/* CSS Document Help*/ .popup { border: 1px solid #71653a; border-radius: 5px; padding: 10px; color: #71653a; background-color: #fff1be; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); visibility:hidden; } .popup:before, .popup:after { content: ""; position: absolute; } .popup.left:before { border-left: 10px solid #71653a; border-top: 10px solid rgba(113, 101, 58, 0); border-bottom: 10px solid rgba(113, 101, 58, 0); right: -10px; top: 20px; } .popup.left:after { border-left: 10px solid #fff1be; border-top: 10px solid rgba(255, 241, 190, 0); border-bottom: 10px solid rgba(255, 241, 190, 0); right: -9px; top: 20px; } .popup.right:before { border-right: 10px solid #71653a; border-top: 10px solid rgba(113, 101, 58, 0); border-bottom: 10px solid rgba(113, 101, 58, 0); left: -10px; top: 20px; } .popup.right:after { border-right: 10px solid #fff1be; border-top: 10px solid rgba(255, 241, 190, 0); border-bottom: 10px solid rgba(255, 241, 190, 0); left: -9px; top: 20px; } .popup.top:before { border-left: 10px solid rgba(113, 101, 58, 0); border-right: 10px solid rgba(113, 101, 58, 0); border-top: 10px solid #71653a; left: 20px; bottom: -10px; } .popup.top:after { border-left: 10px solid rgba(255, 241, 190, 0); border-right: 10px solid rgba(255, 241, 190, 0); border-top: 10px solid #fff1be; left: 20px; bottom: -9px; } .popup.bottom:before { border-left: 10px solid rgba(113, 101, 58, 0); border-right: 10px solid rgba(113, 101, 58, 0); border-bottom: 10px solid #71653a; left: 20px; top: -10px; } .popup.bottom:after { border-left: 10px solid rgba(255, 241, 190, 0); border-right: 10px solid rgba(255, 241, 190, 0); border-bottom: 10px solid #fff1be; left: 20px; top: -9px; }
3. Использовать для “всплывания” JS функцию dcs
Параметры:
orient - ориентация окна относительно объекта 1-top,2-bottom,3-left,4-right
txt - контент,
W – ширина окна, может быть не задана
obj – объект,к которому привязывается окно
для “уплывания”функция nd()
Спойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
//-------------------------------------------------------- function dcs(orient,txt,W,obj){ helpObj=window.document.getElementById("HelpDiv"); if(!obj)obj=ob; A=obj.getBoundingClientRect(); if(W>0) { help_W=W; } else //alert(help_W+" "+A.top+" "+A.left+" "+A.right+" "+A.bottom); //alert(H.top+" "+H.left+" "+H.right+" "+H.bottom); switch (orient) { case 1: helpObj.className="popup top"; Y=A.top-(H.bottom-H.top)-10; X=A.left; break; case 2: helpObj.className="popup bottom"; Y=A.bottom+10; X=A.left; break; case 3: helpObj.className="popup left"; H=helpObj.getBoundingClientRect(); Y=A.top+((A.bottom-A.top)/2)-20; X=A.left-(H.right-H.left)-10; break; case 4: helpObj.className="popup right"; Y=A.top+((A.bottom-A.top)/2)-20; X=A.right+10; break; } //alert(Y+"/"+X); ObjSetXY(helpObj,X,Y,true); } //------------------------------------------------------ function nd(){ helpObj=window.document.getElementById("HelpDiv"); helpObj.style.visibility ="hidden"; helpObj.innerHTML =""; }
Можно посмотреть как работает на PC здесь
https://www[dot]alto-booking[dot]com
или на смартфоне Прикреплено изображение
(Отредактировано автором: 19 Августа, 2017 - 09:49:39)
|