Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
«8 Ядер» - готовые сайты, интернет-магазины на 1С-Битрикс
Сертифицированный партнёр 1С-Битрикс
+7 495 788 88 03
+7 495 788 88 03
E-mail
customer@8cores.ru
Адрес
г. Москва, ул. Б. Никитская, 12с1
Режим работы
Пн. – Пт.: с 10:00 до 19:00 (мск)
Продукты
  • Готовые сайты
    • Интернет-магазины
    • Корпоративные сайты
    • Отраслевые сайты
  • Лицензии 1С-Битрикс
  • Продления лицензий
Услуги
  • Разработка сайтов и приложений
    • Запуск сайта на готовом решении 1С-Битрикс
    • Разработка сайтов
    • Перенос сайта на 1С-Битрикс
  • Интеграция
    • Интеграция сайта с 1С
    • Интеграция с CRM Битрикс24
    • ERP для Производственной компании
  • Поддержка
    • Техническая поддержка
    • Доработка существующего сайта
  • Дизайн
    • Разработка дизайна сайта
  • Информационная безопасность
    • Проверка сайта и удаление вирусов
Блог
Компания
  • О компании
  • Сертификаты
  • Реквизиты
  • Партнёры
  • Вакансии
Москва
«8 Ядер» - готовые сайты, интернет-магазины на 1С-Битрикс
Сертифицированный партнёр 1С-Битрикс
Продукты
  • Готовые сайты
    Готовые сайты
  • Лицензии 1С-Битрикс
    Лицензии 1С-Битрикс
  • Продления лицензий
    Продления лицензий
Услуги
  • Разработка сайтов и приложений
    Разработка сайтов и приложений
  • Интеграция
    Интеграция
  • Поддержка
    Поддержка
  • Дизайн
    Дизайн
  • Информационная безопасность
    Информационная безопасность
Блог
Компания
  • О компании
  • Сертификаты
  • Реквизиты
  • Партнёры
  • Вакансии
    Москва
    +7 495 788 88 03
    +7 495 788 88 03
    E-mail
    customer@8cores.ru
    Адрес
    г. Москва, ул. Б. Никитская, 12с1
    Режим работы
    Пн. – Пт.: с 10:00 до 19:00 (мск)
    «8 Ядер» - готовые сайты, интернет-магазины на 1С-Битрикс
    Продукты
    • Готовые сайты
      Готовые сайты
    • Лицензии 1С-Битрикс
      Лицензии 1С-Битрикс
    • Продления лицензий
      Продления лицензий
    Услуги
    • Разработка сайтов и приложений
      Разработка сайтов и приложений
    • Интеграция
      Интеграция
    • Поддержка
      Поддержка
    • Дизайн
      Дизайн
    • Информационная безопасность
      Информационная безопасность
    Блог
    Компания
    • О компании
    • Сертификаты
    • Реквизиты
    • Партнёры
    • Вакансии
      Москва
      +7 495 788 88 03
      E-mail
      customer@8cores.ru
      Адрес
      г. Москва, ул. Б. Никитская, 12с1
      Режим работы
      Пн. – Пт.: с 10:00 до 19:00 (мск)
      «8 Ядер» - готовые сайты, интернет-магазины на 1С-Битрикс
      Телефоны
      +7 495 788 88 03
      «8 Ядер» - готовые сайты, интернет-магазины на 1С-Битрикс
      • Продукты
        • Продукты
        • Готовые сайты
          • Готовые сайты
          • Интернет-магазины
          • Корпоративные сайты
          • Отраслевые сайты
        • Лицензии 1С-Битрикс
        • Продления лицензий
      • Услуги
        • Услуги
        • Разработка сайтов и приложений
          • Разработка сайтов и приложений
          • Запуск сайта на готовом решении 1С-Битрикс
          • Разработка сайтов
          • Перенос сайта на 1С-Битрикс
        • Интеграция
          • Интеграция
          • Интеграция сайта с 1С
          • Интеграция с CRM Битрикс24
          • ERP для Производственной компании
        • Поддержка
          • Поддержка
          • Техническая поддержка
          • Доработка существующего сайта
        • Дизайн
          • Дизайн
          • Разработка дизайна сайта
        • Информационная безопасность
          • Информационная безопасность
          • Проверка сайта и удаление вирусов
      • Блог
      • Компания
        • Компания
        • О компании
        • Сертификаты
        • Реквизиты
        • Партнёры
        • Вакансии
      • +7 495 788 88 03
        • Телефоны
        • +7 495 788 88 03
      • г. Москва, ул. Б. Никитская, 12с1
      • customer@8cores.ru
      • Пн. – Пт.: с 10:00 до 19:00 (мск)
      Главная
      —
      Блог
      —
      1С-Битрикс
      —Диалоговые окна в Битрикс

      Диалоговые окна в Битрикс

      диалоговые окна в битрикс
      1С-Битрикс
      24 августа 2021
      При разработке функционала в системе Битрикс рано или поздно возникает необходимость создания диалоговых окон. Реализовать это можно стандартными средствами системы. Для этих целей существуют стандартные классы битрикса на JavaScript, это CDialog и CAdminDialog. С помощью этих классов можно выводить диалоговые окна в публичной и административной части сайта.

      Подключение скриптов диалоговых окон

      Перед использованием диалоговых окон, их следует предварительно подключить в PHP коде. Подключение выполняется следующим образом:

      CUtil::InitJSCore(array('window'));

      После того как были подключены скрипты диалоговых окон, можно приступать к созданию объектов диалоговых окон на JavaScript.

      Диалоговое окно с контентом отдельной страницы

      При создании окна мы можем подгружать содержимое из отдельного скрипта. Это может оказаться удобным, когда нужно выполнять какую-либо дополнительную логику для работы диалогового окна.

      var popup = new BX.CDialog({
          'title': 'Заголовок модального окна',
          'content_url': '/content.php',
          'draggable': true,
          'resizable': true,
          'buttons': [BX.CDialog.btnClose]
      });
       
      // событие после открытия окна (но до его выравнивания)
      BX.addCustomEvent(popup, 'onWindowRegister',function(){
         console.log(this); // объект окна
      });
       
      // показ окна
      popup.Show();

      Для вывода простых текстовых сообщений можно выводить текст сообщения непосредственно через инициализацию самого окна.

      Вывод текста в диалоговом окне

      Модальное окно

      Для вывода текста в диалоговом окне, достаточно вместо ссылки в content указать текст сообщения. В остальном вызов окна принципиально схож с предыдущим примером.

      var popup = new BX.CDialog({
          'title': 'Заголовок модального окна',
          'content': 'Текст сообщения модального окна',
          'draggable': true,
          'resizable': true,
          'buttons': [BX.CDialog.btnClose]
      });
           
      popup.Show();

      Как в первом, так и во втором примере в buttons указываются объекты кнопок, которые будут отображаться в окне. В примерах выше это кнопка close – закрыть. Давайте попробуем вывести дополнительные кнопки типичные для окон.

      Показ стандартных кнопок для диалоговых окон

      Модальное окно с кнопками

      Под стандартными кнопками диалоговых окон подразумеваются кнопки «Сохранить» или «Отменить».

      var popup = new BX.CDialog({
          'title': 'Заголовок модального окна',
          'content': 'Контент внутри окна',
          'draggable': true,
          'resizable': true,
          'buttons': [BX.CDialog.btnSave, BX.CDialog.btnCancel]
      });
       
      popup.Show();

      Логически кнопка сохранения диалогового окна подразумевает наличие формы внутри окна. А это значит, что при нажатии кнопки необходимо вызывать специальный обработчик, который выполнит какие-либо манипуляции с данными, и закроет окно.

      var btn_save = {
          title: BX.message('JS_CORE_WINDOW_SAVE'),
          id: 'savebtn',
          name: 'savebtn',
          className: BX.browser.IsIE() && BX.browser.IsDoctype() && !BX.browser.IsIE10() ? '' : 'adm-btn-save',
          action: function () {
              console.log(this.parentWindow); // объект родительского окна
              console.log(this.parentWindow.DIV); // DIV родительского окна
              this.parentWindow.Close();
          }
      };
       
      var popup = new BX.CDialog({
              'title': 'Заголовок модального окна',
              'content': 'Контент модального окна',
              'draggable': true,
              'resizable': true,
              'buttons': [btn_save, BX.CDialog.btnCancel]
          });
       
      popup.Show();

      CAdminDialog может быть инициализирован аналогичным образом в администраторской части. По сути он представляет из себя надстройку над классом CDialog, который так же может быть использован в администраторской части сайта.

      popup.Show();

      Так же по правилам работы с объектами в JavaScript, мы можем вносить изменения.

      // убираем кнопки
      popup.ClearButtons();
       
      // добавляем кнопки
      popup.SetButtons([BX.CDialog.btnSave, BX.CDialog.btnCancel]);
       
      // закрываем окно
      popup.Close();

      События для диалоговых окон

      В большинстве случаев, для окон могут потребоваться выполнять различные обработчики событий. При регистрации обработчика, он связывается с конкретным объектом диалогового окна.

      BX.addCustomEvent(popup, 'onWindowRegister',function(){  
          console.log(this); // объект окна
      });

      В данном примере указано событие onWindowRegister, которое срабатывает при инициализации окна. На самом деле список событий довольно большой, и каждый из них может быть использован для конкретных случаев.

      • onWindowRegister – событие при открытии окна;
      • onWindowUnRegister(bool_clean) – событие при закрытии окна;
      • onWindowError(arr_messages) – событие при появлении ошибки;
      • onBeforeWindowClose – событие перед закрытием окна;
      • onWindowClose(object) – событие после закрытия окна;
      • onWindowResizeStart – событие перед началом изменения размера окна;
      • onWindowResize – событие при изменении размера окна;
      • onWindowResizeFinished – событие после окончания изменения размера окна;
      • onWindowResizeExt(arr_size) – событие при изменения размера окна;
      • onWindowExpand – событие при расширении окна;
      • onWindowNarrow – событие при сужении окна;
      • onWindowDragStart – событие перед началом перемещения окна;
      • onWindowDrag – событие при перемещении окна;
      • onWindowDragFinished – событие после перемещения окна;
      • onDynamicModeChange – событие при динамическом изменении окна;
      • onMenuOpenerMoved
      • onMenuOpenerUnhide

      Так к примеру, если необходимо выполнить какие-либо операции после закрытия окна, можно вместо onWindowRegister указать onWindowClose, и так далее. В администраторской части довольно часто используют CDialog вместо CAdminDialog, и связано это с тем, что какого-то принципиального отличия в этих классах нет.

      • Комментарии
      Загрузка комментариев...
      api битрикс модальные окна
      Назад к списку
      • 1С Администрирование 2
      • 1С-Битрикс 15
      • HTML/CSS 1
      • jQuery 1
      • PHP 2
      • Оптимизация 9
      1с 1С ajax apache api bitrix clean-param CRM cron curl etext get google htaccess html jivo jquery json market marketplace nginx PageSpeed php post robots robots.txt search seo web агенты администрирование артикул аспро битрикс боты вирус директория защита каталог композит кэш логи магазин маркетплейс метрика модальные окна настройка обмен онлайн консультант оптимизация ордер ошибки пагинация папка парсинг поиск покупка сервера склад скрипт спам страница тестирование троян ускорение ут цвета чпу юkassa яндекс
      Продукты
      Услуги
      Компания
      Блог
      Контакты
      +7 495 788 88 03
      +7 495 788 88 03
      E-mail
      customer@8cores.ru
      Адрес
      г. Москва, ул. Б. Никитская, 12с1
      Режим работы
      Пн. – Пт.: с 10:00 до 19:00 (мск)
      customer@8cores.ru
      г. Москва, ул. Б. Никитская, 12с1
      © 2010-2023 «8 Ядер» - веб-студия полного цикла
      Политика конфиденциальности