Форумы портала PHP.SU :: Версия для печати :: Всплывающее окно при нажатии

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Всплывающее окно при нажатии

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Всплывающее окно при нажатии

Страниц (1): [1]

1. Pavel8897 - 18 Августа, 2017 - 11:58:10 - перейти к сообщению

Подскажите пожалуйста, как написать простую функцию для всплывающего окна при нажатии на кнопку.

<form method='post' class='reg-form'; display:none;"> //скрытое окно
<button class="btnind">Начать поиск</button> //кнопка

2. rgl - 18 Августа, 2017 - 14:10:57 - перейти к сообщению

CODE (html):
скопировать код в буфер обмена

 
<form id="vsplyvalka" style="display:none">
то, что нужно внутри формы
</form>
<!-- чтобы кнопка была видна при скрытой форме, она должна находиться после закрывающего form, т.е. снаружи от формы -->
<input type="button" value="начать поиск" onclick="document.getElementById('vsplyvalka').style.display = 'block'">
 

3. Vladimir Kheifets - 19 Августа, 2017 - 09:48:41 - перейти к сообщению

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> поставить:

CODE (html):
скопировать код в буфер обмена

<DIV id="HelpDiv" class="popup bottom"  style="Z-INDEX: 100;POSITION: absolute"></DIV>

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()

Спойлер (Отобразить)

Можно посмотреть как работает на PC здесь
https://www[dot]alto-booking[dot]com
или на смартфоне

4. Pavel8897 - 24 Августа, 2017 - 14:49:17 - перейти к сообщению

Спасибо большое!