Быстрый и надёжный хостинг на SSD-дисках от 165р в месяц   •   Реклама
4 159 просм
21 комм
Поделиться:

Вызов стандартного модального окна в DLE

24 ноя
Хаки

Если вы уже давно знакомы с DataLife Engine, то знаете, что часть информации (а именно информационные уведомления) представляется пользователю в модальном окне. Вполне себе хорошее решение, которое позволяет значительно сэкономить время.

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

Код для вызова:

<a href="javascript: void(0);" onclick="DLEalert('Текст', 'Заголовок');">Модальное окно</a>

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

21
комментарий
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    2
      •  Пользователь
    14 фев в 10:46

    Добрый день. Подскажите, а как подтвердить данные в этом окне? Допустим я хочу добавить возможность редактирования пользователя. Нажимая стандартную кнопку подтверждения submit ничего не происходит. Не подскажите, как из окошка сделать подтверждение сабмит для редактирования пользователя? Чтоб и страничка перезагружалась.

      • 0
      919
        •  Команда Pandoge
      15 фев в 13:25

      Владислав Александрович, здравствуйте!

      Подскажите, где вы вызываете это окно и какие данные в нем показываются?

      • 0
      2
        •  Пользователь
      15 фев в 19:22

      Артём Мáлков, на странице юзера.

      Выглядит так:

      Копировать всё содержимое не буду, в общем внутри:

      <script>
          function edit_profile() {
              $("#edit_profile").dialog({
                  autoOpen: true,
                  show: "fade",
                  hide: "fade",
                  width: 600,
                  buttons: {
                      "Закрыть окно": function() {
                          $(this).dialog("close");
                      },
                  }
              });
          }
      </script>
      <div id="edit_profile" title="Изменение настроек профиля" style="display: none;">
              <ul class="ui-form">
                  <li class="form-group mb-1">
                      <label for="fullname">Ваше имя</label>
                      <input type="text" name="fullname" id="fullname" value="{fullname}" class="w-100">
                  </li>
        </ul>
              <div class="form-group">
                  <input name="submit" type="hidden" id="submit" value="submit">
                  <button class="btn btn-sm btn-green" value="submit" type="submit" title="Сохранить">Сохранить</button>
              </div>
          </div>

      При нажатии на submit не перезапускается и накого действия не происходит. Делал такую же для login, там все превосходно.

    • 0
    4
      •  Проверенный
    21 апр в 13:43

    Здравствуйте Артём! Задача: вывод модального окна один раз при открытии сайта. В main.tpl (пробовал и в блок head и body) добавил:

    <script>

    $(document).ready(function() {

    DLEalert('Текст', 'Заголовок');

    });

    </script>

    Работает, но проблема в том, что при открытии любой странице сайта все равно выскакивает модальное окно. Пока не получается разобраться. Был бы признателен, за помощь или подсказку.

      • 0
      919
        •  Команда Pandoge
      21 апр в 14:29

      Заур Магомедов, здравствуйте!

      Один раз в день?

      • 0
      4
        •  Проверенный
      22 апр в 16:58

      Артём Мáлков, добрый день!

      Смотрите, надо чтобы при каждом новом открытии сайта посетителем выходило модальное окно. Затем после того, как он его закроет и начнет переходить на другие страницы сайта (например "контакты"), это окно снова не появлялось (у меня на сайте пока так происходит).

      • 0
      919
        •  Команда Pandoge
      23 апр в 17:05

      Заур Магомедов, здравствуйте!

      Я предлагаю Вам использовать куки. Логика такая:

      1. При первом посещении сайта сохраняем некоторую куку и открываем окно, если кука не была ранее установлена.

      2. При посещении других страниц сайта проверяем есть ли кука, и если есть - окно не открываем.

      Реализация примерно такая (проверить нет возможности, так что проверьте сами и отпишитесь):

      <script>
      	
      	function get_cookie(name) {
      	
      		let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
      		
      		if(matches) {
      			
      			return decodeURIComponent(matches[1]);
      			
      		} else {
      			
      			return "";
      			
      		}
      		
      	}
      
      	$(document).ready(function() {
      		
      		if(get_cookie("open_modal") == "") {
      			
      			document.cookie = "open_modal=true;path=/;";
      			
      			DLEalert('Текст', 'Заголовок');
      		
      		}
      		
      	});
      	
      </script>

      Кука будет удаляться автоматически при закрытии браузера.

      • 0
      4
        •  Проверенный
      24 апр в 08:35

      Артём Мáлков, доброе утро!

      Попробовал вставить этот код (пробовал в разные места: в body, в head) и теперь вообще ничего не происходит, то есть модальное окно перестало выходить.

      Но все равно спасибо, идея отличная.

      • 0
      919
        •  Команда Pandoge
      24 апр в 13:12

      Заур Магомедов, здравствуйте!

      Код поправил. Окно будет показываться один раз при первом посещении сайта, следующий - когда человек закроет браузер и откроет вновь.

      • 0
      4
        •  Проверенный
      24 апр в 14:35

      Артём Мáлков, спасибо, теперь меня устраивает, Вы настоящий профессионал.

      Скажите куда, переведу на бутылочку Чешского пива в знак благодарности:)

      • 1
      919
        •  Команда Pandoge
      24 апр в 17:17

      Заур Магомедов, на странице "О Pandoge" есть информация на этот счет wink

    • 1
    2
      •  Пользователь
    21 дек в 17:54

    Подскажите как вставить в данное модальное окно тег

      • 0
      2
        •  Пользователь
      21 дек в 17:55

      Пример идеи отправлю в личку. Не хочу что бы лишние ссылки были на конкурентов) А тег {calendar}

      • 1
      919
        •  Команда Pandoge
      21 дек в 21:18

      Александр Орлов, из простого.

      Ссылка на вызов:

      <a href="javascript: void(0);" onclick="show_modal_dle();">Показать окно</a>

      Скрипт:

      <script>
      	
      	function show_modal_dle() {
      	
      		$("#div_modal_dle").dialog({
      			autoOpen: true,
      			show: "fade",
      			hide: "fade",
      			width: 600,
      			buttons: {
      				"Закрыть окно": function() {
      					$(this).dialog("close");
      				},
      			}
      		});
      		
      	}
      	
      </script>

      Контент:

      <div id="div_modal_dle" title="Название окна" style="display: none;">
      	
      	{calendar}
      	
      </div>
    • 0
    7
      •  Проверенный
    4 дек в 20:53

    Подскажите, а возможно сделать вызов модального окна автоматически при входе на сайт?

      • 0
      919
        •  Команда Pandoge
      5 дек в 00:16

      Сергей, так:

      <script>
      
      	$(document).ready(function() {
      
      		DLEalert('Текст', 'Заголовок');
      
      	}); 
      
      </script>
      • 0
      7
        •  Проверенный
      5 дек в 21:07

      Артём Мáлков, Поставил, но увы нечего не выводит(

      • 0
      919
        •  Команда Pandoge
      6 дек в 00:33

      Сергей, скрипт нужно вставить перед </body>, а в HEAD:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      • 1
      7
        •  Проверенный
      6 дек в 15:34

      Артём Мáлков, Спасибо большое помогло. :)

    • 2
    1
      •  Пользователь
    5 ноя в 09:30

    Подскажите, а как убрать кнопку "ok" в этом модальном окне ?

      • 2
      919
        •  Команда Pandoge
      5 ноя в 15:41

      Антон, покажите пример, как выглядит окно на Вашем сайте.

Подняться наверх
«Pandoge» - помощник вебмастера