Форум временно переведен в режим "Только для чтения". По вопросам технической поддержки, обращайтесь, пожалуйста на admin@getbb.ru

Окно-предупреждение для гостей форума.

Вопросы оформления, приемы HTML и JavaScript, обсуждение прочих стилей, не представленных в предыдущем разделе.
Правила форума
Если ваш вопрос касается стиля, загруженного в разделе "Стили для вашего форума", задайте пожалуйста вопрос в том разделе в теме конкретного стиля. Если ваш вопрос касается предустановленного стиля, задайте вопрос в соответствующей теме.
Создавайте НОВУЮ ТЕМУ только в том случае, если еще нет темы посвященной вашему стилю или вопрос не касается какого-то конкретного стиля.
Задавая вопрос, не забывайте написать название вашего стиля.
Спасибо! :)
Ответить

Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 10 раз
Пол:

Окно-предупреждение для гостей форума.

Сообщение s666 » 03 апр 2017, 08:01

В некоторых случаях (конкретно в моём) нужно предупреждать гостей форума о возрастном цензе. Для себя решил эту проблему следующим образом - сделал всплывающее окно при заходе гостя на страницу Портала и Главную страницу. Установленный стиль - просильвер, правда он несколько модифицирован. Дизайн моего форума пока разрабатываю, есть ещё несколько моментов для доработки, но в общих чертах форум готов... Выглядит это таким образом -
Изображение
Hosting->вставки кода->overall_footer_after.html
В overall_footer_after.html вставляем следующий код (стили окна) -

Код: Выделить всё

<style>
.reg-button {
     border-style: double; 
     border-color: black ;
     border-radius: 5px ;
     border-width: 5px ;
     padding: 5px;
     text-align: center ;
     opacity: 0.6;
     position: relative;
     width: 50px ;
     background-color: white ;
     color: balck ;
}
.reg-button:hover {
     opacity: 0.7;
     text-decoration: none ;
     color: black ;
}
.slide {
    width: 90%;
    top: 50%;
    right: 5% ;
    margin: 0px ;
    position: absolute; 
    color: white ;
    display: block;
    text-shadow: 2px 2px 4px #141414, -2px -2px 4px #141414;
}
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed;
    cursor: default;
}
.overlay:target {
    display: block;
}
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: rgb(0,0,0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
.popup img {
    width: 100%;
    height: auto;
}
.popup iframe {
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; 
    display:block;
    margin: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
}
.popup h2 { /* заголовок 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
</style>
Далее записываем html код и функцию проверки на нового пользователя. Сформировал я её несколько коряво, по появлению в меню пункта "вход". Кто подскажет более интересный вариант - буду признателен. С системными переменными у меня ни чего не получилось....

Код: Выделить всё

<!-- Модальное окно -->
<a href="#win3" class="overlay" id="win3"></a>
<div class="popup" id="wind" style="background-color: white;">
   <h2>Доброго времени суток!</h2>
   <br>
   <img src="http://distillate.rx22.ru/store/distillate_rx22_ru/images/Brout2.png" alt="no  image" />
   <span class="slide" id="sliders_text">ТЕКСТ КОТОРЫЙ ВЫ ХОТИТЕ УВИДИТЬ.</span>
   <div style="position: absolute; top: 85% ; right: 20px; float: right;">
         <p style="float: left; color: white; display: block-inline; margin-right: 10px ;"> <b>Я подтверждаю, что мне исполнилось 18 лет </b></p>
         <a href="#close" id="registr" class="reg-button"><b>Войти</b></a>
    </div>
</div>

<script type="text/javascript">
$(function () {                                      // Когда страница загрузится
    $('.breadcrumbs .crumb a').each(function () {             // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;                // получаем адрес ссылки
        if(location.indexOf(link)==0) {
           if (location.indexOf("portal")>1 | location.indexOf("index")>1) {
             $('ul.linklist > li.rightside').each(function(){
                 var obj_link=this.attributes[0];
                 var class_name=obj_link.nodeValue;
                 if(class_name.indexOf("icon-logout rightside")>1){
                    window.location.href="#win3"; 
                    return false;
                 };
                 return true ;
          });
             return true;};
           }
    });
});
</script>
Если кто-то хочет что бы всплывающее окно появлялось и на других страницах, то корректируем вот это место в коде:
if (location.indexOf("portal")>1 | location.indexOf("index")>1)
Тестовый форум Чарка

Аватара пользователя

ForChat
Сообщения: 59
Зарегистрирован: 01 янв 2016, 10:14
Благодарил (а): 9 раз
Поблагодарили: 11 раз
Пол:
Контактная информация:

Окно-предупреждение для гостей форума.

Сообщение ForChat » 03 апр 2017, 23:53

М-м, не очень... Во-первых, всплывает постоянно, а должно один раз, во-вторых, там кнопки со слайдера вылазят над ним, надо z-index правильно задать. Это я смотрел на сайте в подписи, если что. У меня нет готового решения, я использую библиотеку fancyBox для подобного. Но в сети полно скриптов модальных окон с привязкой к кукам, чтобы нажав на "войти" оно больше не всплывало. В идеале сделать подвязку к кукам phpBB или к сессии, может и есть такие скрипты для него.
s666 писал(а):
03 апр 2017, 08:01
Далее записываем html код и функцию проверки на нового пользователя.
Вот этого я не увидел.
Системными переменными можно ограничить группу для кого она будет всплывать, ну т.е. для гостей. Для не зарегистрированных:

Код: Выделить всё

<!-- IF not S_USER_LOGGED_IN -->то что выводится для не зарегистрированных<!-- ENDIF -->


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 10 раз
Пол:

Окно-предупреждение для гостей форума.

Сообщение s666 » 04 апр 2017, 00:23

ForChat писал(а):
03 апр 2017, 23:53
Во-первых, всплывает постоянно, а должно один раз, во-вторых, там кнопки выпадают лишние.
За кнопки - спасибо... исправлю, нужно z-index подправить. А окно всплывает только при посещениях страницы Портал и Главная, это так специально реализовано - дополнительный стимул регистрации на форуме. Надоело окно - регистрируйся. Вот такая задумка. Но это не окончательное решение, посмотрим статистику посещений и статистику регистраций. Если что, то подправлю, а то у меня до 500 гостей за сутки бывает. Ведь для чего нужен форум? Одна голова хорошо, а много голов, лучше. Так что спасибо за критику.
ForChat писал(а):
03 апр 2017, 23:53
s666 писал(а): ↑
Вчера, 15:01
Далее записываем html код и функцию проверки на нового пользователя.

Вот этого я не увидел.
Смотрим внимательно эту строку -
if(class_name.indexOf("icon-logout rightside")>1)
расшифровываю - если в правом верхнем углу есть пункт меню "Вход", то это гость на форуме. Сама функция, в коде на форуме, выполняет еще одну задачу - закрашивает пункт меню в определённый цвет, в зависимости от страницы. Но в этом коде я не стал публиковать этот кусок.
По системным переменным понятно, но не понятно как их использовать в функциях...
Тестовый форум Чарка

Аватара пользователя

ForChat
Сообщения: 59
Зарегистрирован: 01 янв 2016, 10:14
Благодарил (а): 9 раз
Поблагодарили: 11 раз
Пол:
Контактная информация:

Окно-предупреждение для гостей форума.

Сообщение ForChat » 04 апр 2017, 10:32

А ну как "попрошайку" регистрации можно и так использовать, но для возрастного ценза лучше сделать на весь форум и с куками. Ведь, например, с поиска могут попасть практически на любую страницу. Про сравнение ясно, я думал, что нужно сравнение - в первый ли раз зашел пользователь на форум. В общем-то, переменными можно тоже самое указать без скрипта. Просто возьми все содержимое в переменную. Та я не критикую, просто рассуждаю как бы сам сделал. :oops:

Ответить