1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Создание модального окна

Тема в разделе "Советы, руководства и видео-уроки", создана пользователем carliker, 2 май 2012.

Загрузка
  1. carliker

    carliker Местный

    Регистрация:
    03.10.11
    Сообщения:
    274
    Симпатии:
    114
    Версия XF:
    1.1.1
    Как то захотелось мне сделать кнопочку, при нажатии на которую появилось бы всплывающее окошко с некоторой информацией. Так как я далеко не специалист в области программирования, да и движок ксена знаю весьма поверхностно, первое, что пришло в голову, использование стороннего скрипта для этих целей.

    Собственно вот что мне удалось сделать:
    1. Скачиваем архив и заливаем его в папку js (в архиве папка modalbox, ее и надо залить)
    2. Создаем новый шабон со следующим содержимым:
    HTML:
    <div class="section">
    <div class="secondaryContent">
    <link rel="stylesheet" href="/js/modalbox/reveal.css">
    <script src="/js/modalbox/jquery.reveal.js" type="text/javascript"></script>
    <div id="myModal" class="reveal-modal">
    Текст сообщения с использованием HTML
    <a class="close-reveal-modal">x</a>
    </div>
    <h3>Название блока</h3>
    <a class="button"  href="#" data-reveal-id="myModal">Кнопка</a>
    </div>
    </div>
    3. Вставляем шаблон в нужное место, например я это сделал в шаблоне sidebar_online_users
    после
    Код:
    <xen:edithint template="sidebar.css" />
    встаивил
    Код:
    <xen:include template="Название шаблона" />
    В итоге мы будем иметь блок в сайдбаре с кнопкой в стиле форума, при нажатие на которую, будет появляться примерно вот такое окно:

    [​IMG]

    В файле jquery.reveal.js можно провести небольшую настройку окошка, например, тип анимации (fade, fadeAndPop, none), ширину, высоту, скорость анимации и т.д.

    Я особо не разбирался что и как сделано, главное что в итоге получил имено то, что и хотел, на этом и остановился. Возможно, кому-то пригодится).
     

    Вложения:

    • modalbox.zip
      Размер файла:
      4,7 КБ
      Просмотров:
      61
    Mefodian, Alex Gludo, Mirovinger и 2 другим нравится это.
  2. vovik1646

    vovik1646 Пользователь

    Регистрация:
    15.12.12
    Сообщения:
    88
    Симпатии:
    12
    Версия XF:
    1.2.4
    А реально сделать его при заходе на сайт автоматически всплывающим? и исчезающим только после регистрации. так сказать мотивация для регистрации.
    я конечно понимаю что сам форум должен заинтересовать, а не окошко заставить, но все же...
     
  3. veron

    veron Местный

    Регистрация:
    23.12.12
    Сообщения:
    31
    Симпатии:
    2
    Версия XF:
    1.4.8
    Подскажите пожалуйста как вывести оформление модального окна при помощи стандартного xenoverlay?
     
  4. swap

    swap Активный пользователь

    Регистрация:
    14.10.11
    Сообщения:
    28
    Симпатии:
    21
    Версия XF:
    1.3.2
    Далеко не специалист, но можно попробовать разместить в шаблон PAGE_CONTAINER между тегами <head> что нибудь типа:
    Код:
     // modal это наше окошко
    // xf_sessions вот тут имя кук, может быть другим так как точно не помню
    <script>
     function go_reg(){
     document.getElementById('modal').style.display='none';
     window.location.href = '/index.php?login/login';
     };
    if(document.cookie.indexOf('xf_sessions')==-1){
    document.getElementById('modal').style.display="block";
        setTimeout(go_reg, 9000);
    }
    </script>
    
    То есть проверяем наличие кук, если их нету то выкидываем модальное окошко, задержка на 9 сек, после перекидываем на страницу с регистрацией.В модальном окошке сообщение с просьбой авторизации или регистрации и полное отсутствие кнопок.
    Не знаю как точно это реализовать на Xenforo, просто не знаю js и вообще серверные языки для меня далёки и скорей всего тут будет загвоздка с страницей регистрации, так как на странице регистрации тоже будет вылазить это окошко.
    Надо наверное вставить ещё одно условие, с определением страницы.
     
  5. melti25

    melti25 Read only

    Регистрация:
    24.09.14
    Сообщения:
    11
    Симпатии:
    0
    Версия XF:
    1.4.0
    А как это все сделать на главной странице под блок соц сетей?
     
  6. Exile

    Exile Местный

    Регистрация:
    27.06.11
    Сообщения:
    999
    Симпатии:
    543
    Версия XF:
    1.4.4
    Поискать в шаблонах где блок соцсетей прописан и сделать по аналогии? sidebar_share_page, вроде был шаблон или как-то так.
     

Поделиться этой страницей