Плавающее окно
Добрый день!
хочу на сайте сделать плавающее окошко с контактами администрации для связи, кто нибудь посдкажет как реализовать? сайт на joomla хотелось бы что бы плагин был всегда на одном месте при прокрутке странице, т.е. всегда был видео пользователю и из него можно было скопировать контакты. всем кто поможет заранее спасибо:) |
alerzo,
Окошко с разворачиванием или постоянно открыто ? |
обычно окошко на подобии вот такого
https://nettuts.s3.amazonaws.com/018...al_nettut.html оно тянется за прокруткой вместо него я просто хочу написать аську мыло и скайп администрации |
<div id=right>
<!--Тут контент-->
</div>
<style type="text/css">
#right {
border:2px solid red;
width: 100px;
height:56px;
right:10px;
border-radius:15px;
position:fixed;
top:34%;
z-index:2000;
background: #fff;
}
</style>
Без дрыганий |
большое спасибо! почти то что нужно
|
а можно как то добавить маленькие кнопочки сбоку чтобы содержимое строки копировалось в бучер
например строка {копировать} строка2 {копировать} строка3 {копировать} т.е. то что в строке запоминает в бучер при нажатии кнопочки или слова копировать |
и можно как то добавить внизу этого дива что плавает сбоку кнопку закрыть?
и еще он будет корректно отображаться во всех браузерах или может уезжать на контент? |
Цитата:
|
а закрыть окошко которое плавает можно?
|
alerzo,
Вот Вариант, может удобнее => http://forumd.ru/viewtopic.php?id=3014 |
спасибо, но вполне и такого хватит.
не подскажите как сделать крестик вверху этого окна чтобы оно исчезало? |
alerzo,
Ссылка есть на сайт установки ? |
|
alerzo,
Сворачиваем наглухо вместе с крестиком ? |
да
|
<div id=right><span id="close-right"></span>
Тут контент
</div>
<script type="text/javascript">
jQuery('#close-right').click(function(){
jQuery('#right').fadeOut(1300);
});
</script>
<style type="text/css">
#right {
border:3px solid #00ACFF;
width: 160px;
height:140px;
right:10px;
border-radius:10px;
position:fixed;
top:30%;
z-index:2000;
background: #202226;
}
#close-right {
opacity:0.8;
display:inline-block;
float:right;
margin:4px;
cursor:pointer;
position:relative;
width:19px;
height:19px;
background: url(http://s1.uploads.ru/i/dAjpq.png);
}
</style>
Поправил |
поставил, после обновления страницы она снова появляется, это никак не исправить?
|
alerzo,
:blink: Ну у Вас и затребованности - типо по мелочи... час подумаем На сколько скрывать ? |
:) ну так то красиво получилось! спасибо за помощь!:dance:
|
<div id=right><span id="close-right"></span>
Тут контент
</div>
<script type="text/javascript">
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
if(getcookie('close-right'))jQuery('#right').hide();
jQuery('#close-right').click(function(){
setcookie('close-right',true,4*60*60*1000) //Кук на 4 часа
jQuery('#right').fadeOut(1300);
});
</script>
<style type="text/css">
#right {
border:3px solid #00ACFF;
width: 160px;
height:140px;
right:10px;
border-radius:10px;
position:fixed;
top:30%;
z-index:2000;
background: #202226;
}
#close-right {
display:inline-block;
float:right;
margin:4px;
cursor:pointer;
position:relative;
width:19px;
height:19px;
background: url(http://s1.uploads.ru/i/dAjpq.png);
}
</style>
|
По-ходу -нужна Еще одна кнопка - связь с Администрации - чобы окно всплывало, при надобности
|
Deff,
Благодарю за помощь! Все круто:) :) :) |
Цитата:
|
alerzo,
Ну сделайте скриншот => http://uploads.ru/ - ткните стрелкой на кликабельную надпись |
скриншот чего формы?
|
alerzo,
неть - форма же должна появляцо по клику на ? |
|
alerzo,
Ну - а что нужно тыкать - что бы всплыло окошко ? |
а вот это я и не знаю =D
|
<div id="container">
<div id="content">
<div class="top-content"></div>
*!*
<span class="cf_text">Если вы не уверены, что вам нужно что либо заказывать, то Вам <button id="Form_Open">сюда!</button>
<div id="Wrap_Form" class="content" style="display:none">
<form name="ChronoContact_vopros" id="ChronoContact_vopros" method="post" action="http://jet-s.ru/index.php?option=com_chronocontact&task=send&chronoformname=vopros&Itemid=24">
<div class="form_item">
<div class="form_element cf_text">
<span class="cf_text">Просто опишите Вашу проблему и мы постараемся Вам помочь! Желательно описывать более полно, помощь в настройках в данном разделе оказывается только тем, кто их покупал. Не стоит Вы прашивать здесь настройки.</span>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Введите ваше имя:</label>
<input class="cf_inputbox" maxlength="150" size="30" title="Введите имя" id="text_1" name="name" type="text">
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Выберите тему:</label>
<select class="cf_inputbox" id="select_2" size="1" title="" name="tema">
<option value="Отзыв">Отзыв</option>
<option value="Предложение">Предложение</option>
<option value="Помощь в настройке">Помощь в настройке</option>
<option value="Вопрос">Вопрос</option>
<option value="Другое">Другое</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Текст сообщения:</label>
<textarea class="cf_inputbox required" rows="15" id="text_3" title="Текста нет!" cols="50" name="text"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Куда вам Ответить?</label>
<div class="float_left">
<input value="E-mail" title="Не выбрали способ связи" class="radio validate-one-required" id="radio00" name="radio0" type="radio">
<label for="radio00" class="radio_label">E-mail</label>
<br>
<input value="ICQ" title="Не выбрали способ связи" class="radio validate-one-required" id="radio01" name="radio0" type="radio">
<label for="radio01" class="radio_label">ICQ</label>
<br>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Введите icq / e-mail:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="пусто!!!" id="text_6" name="e-mail/icq" type="text">
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Отправить" name="button_7" type="submit">
</div>
<div class="cfclear"> </div>
</div>
<input type="hidden" name="20d50bc9bdb9b761850b23d2d9b80d90" value="1">
<input type="hidden" name="1cf1" value="966333d34c48b96d9cca684a86ce5f57">
</form>
</div>
<script type="text/javascript">
jQuery('#Form_Open').click(function(){
jQuery('#Wrap_Form').slideToggle('slow');
});
</script>
*/!*
<div class="bottom-content"></div>
</div><!-- #content-->
</div><!-- #container-->
Изменяемая часть - красным |
Так - кусочек стиля
<style type="text/css">
#Wrap_Form {
margin-top:34px;
border:3px solid #297CA2;
padding:12px;
max-width:530px;
background: #202226;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:5px;
}
</style>
|
спасибо за помощь!
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:39. |