148 комментариев

  1. Алексей
    10 июня 2014

    Добрый день!

    В header-e шаблона opencart есть следующее:

    Туда же, в хедер, вставляю див с модальным окном или формой,

    Заголовок

    Любой текст,что душе угодно

    Но в обоих случаях оно торчит на странице видимым куском, а не появляется по клику на картинку... Что-то я упустил, а что — не могу понять...

    Ответить

  2. Dmitriy
    18 октября 2014

    Доброго всем здоровица. У меня наверное дебильный вопрос, просто я в это деле новичёк.

    У меня сайт работает на движке Модекс. В нём следующая структура:

    Шаблоны

    Дополнительные поля

    Чанки

    Сниппеты

    Плагины

    Категории

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

    Я создал чанк, например ,в нём вверху прописал например:

    См. Окно в действии — Ширина = 500px

    затем ниже

    Заголовок

    Любой текст,что душе угодно

    затем в стили прописал ваш код

    В нужное мне место на сайте я подключил этот чанк, но

    куда прописывать

    //Когда вы нажмете на ссылку с классом poplight и HREF начинается с a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Получить Popup HREF и определить размер
     
        //Запрос и  Переменные от HREF URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Возвращает первое значение строки запроса
     
        // Добавить кнопку "Закрыть" в наше окно, прописываете прямой путь к картинке
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" rel="nofollow"></a>');
     
        //Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в CSS
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
     
        //Устанавливает величину отступа на Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
     
       //Постепенное затемнение фона
        $('body').append(''); //Добавляем fade тегу body.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Постепенное исчезание слоя - .css({'filter' : 'alpha(opacity=80)'}) используется для фиксации в IE , фильтр для устранения бага тупого IE 
     
        return false;
    });
     
    //Закрыть всплывающие окна и затемненный фон
    $('a.close, #fade').live('click', function() { //При нажатии на кнопку или затемненный фон.
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();
        });
        return false;
    });
    });

    Спасибо за ответ

    Ответить

    • driver
      18 октября 2014

      Код, что вы привели в комментарии, это содержимое исполняемого плагина jQuery. Заключите его в <script type="text/javascript">.....</script>, получится должно следующее:

      <script type="text/javascript">
      $(document).ready(function(){						   		   
      	//При нажатии на ссылку с классом poplight и href с a # 
      	$('a.poplight[href^=#]').click(function() {
      		var popID = $(this).attr('rel'); //Получить имя popup
      		var popURL = $(this).attr('href'); //Определить размер popup из href				
      		//Запрос и Переменные из HREF URL
      		var query= popURL.split('?');
      		var dim= query[1].split('&');
      		var popWidth = dim[0].split('=')[1]; //Возвращает первое значение строки запроса
       
      		//Добавить кнопку "Закрыть" в наше окно, прописываете прямой путь к картинке кнопки
      		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть окно" class="close" rel="nofollow"></a>');		
      		//Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в CSS
      		var popMargTop = ($('#' + popID).height() + 80) / 2;
      		var popMargLeft = ($('#' + popID).width() + 80) / 2;
       
      		//Применяем отступы в всплывающем окне
      		$('#' + popID).css({ 
      			'margin-top' : -popMargTop,
      			'margin-left' : -popMargLeft
      		});
      		//Фон слоя затемнения
      		$('body').append('<div id="fade"></div>'); //Добавляем слой затемнения.
      		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Постепенное исчезание слоя - .css({'filter' : 'alpha(opacity=80)'}) используется для фиксации в IE, фильтр для устранения бага тупого IE 
       
      		return false;
      	});
      	//Закрыть всплывающее окно и слой затемнения
      	$('a.close, #fade').live('click', function() { //При нажатии рядом, окно и слой затемнения закрываются 
      	  	$('#fade , .popup_block').fadeOut(function() {
      			$('#fade, a.close').remove();  
      	});	
      		return false;
      	});	
      });
      </script>

      Затем разместите эту конструкцию в подвале вашего шаблона, перед тегом </body>

      С модекс знаком поверхностно, так что со структурой шаблонов, вам придётся разбираться самостоятельно

      Ответить

  3. Иван
    14 ноября 2014

    Автор крут молодец, что скачать можно

    Ответить

  4. Аня
    11 декабря 2014

    Здравствуйте. Статья написана очень толково, но мне как новичку некоторые моменты не совсем понятны. У меня на странице много миниатюр картинок, большой размер которых нужно открыть в модальном окне. Где мне разместить ссылку на большие картинки? Иначе у меня открывается просто пустое окно. Заранее спасибо за ответ.

    Ответить

    • driver
      11 декабря 2014

      Здесь:

      <div id="popup_name" class="popup_block"> Сюда картинку.... </div>

      Только вряд ли именно такое модальное окно вам нужно, большое количество картинок, такое же большое количество разных размеров, эти окна больше для информационного разового содержания, а не для организации полноценной галереи. Существует много готовых решений и не обязательно на jQuery. Например такое: тынц или целая коллекция галерей Ну, и на конец это: тынц

      Ответить

      • Аня
        12 декабря 2014

        Огромное спасибо за совет 🙂 Всё получилось 🙂

        Ответить

  5. andr
    25 декабря 2014

    Спасибо! Буду пробовать сейчас.

    Как раз стоит задача сделать вывод видео с ютуба мелкими миниатюрами с всплывающим окном для показа в развернутом режиме на ½ экрана.

    Ответить

    • driver
      25 декабря 2014

      За отзыв спасибо.

      При использовании видео, не забывайте, что «кашерное» во всех отношениях решение остановки ролика при закрытии окна, пока ещё отсутствует, при необходимости используется тупо перезагрузка страницы, что конечно же не есть хорошо.

      То же самое и с модальным блоком видео на чистом CSS

      Ответить

  6. Cartman
    24 апреля 2015

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

    Ответить

    • driver
      24 апреля 2015

      Посмотрите вот эту статью и прочитайте комментарии к ней, там всё есть по вашему вопросу.

      Ответить

  7. Влад
    16 августа 2015

    Не работает с подгрузкой данных через ajax.

    Берет данные изначалього divа, а потому уже не центруется.

    Ответить

    • driver
      17 августа 2015

      Здравствуйте, Влад.

      Думается мне, что вы слишком требовательны к такому простейшему скрипту, изначально заточенному под довольно скромный функционал, расширять который у меня нет ни времени и особо острого желания. Да и нигде, ни слова в статье не сказано о возможности подгрузки данных через ajax. Всегда существует альтернатива, в конце концов есть масса настоящих «комбайнов», которые загрузят и подгрузят вам всё что угодно, и откуда угодно.

      Спасибо за проявленный интерес, найдёте решение, буду рад если отпишитесь, что да как.

      Удачи!

      Ответить

  8. Александр
    6 октября 2015

    здравствуйте... можно ли это окно использовать для каталога...? на странице 12 div — блоков. в каждом блоке есть ссылка — подробнее... можно ли подключить все блоки ?

    Ответить

    • driver
      6 октября 2015

      Здравствуйте, Александр.

      Предусмотрена возможность использования неограниченного количества модальных окон. Главное следите за правильной связкой атрибута rel ссылки активации окна и уникального идентификатора id самого модального div-контейнера

      Так если в ссылке rel="popup-1" она откроет окно с id="popup-1", и так далее, при добавлении очередного модального окна (popup-2, popup-3 и т.п...)

      Это если я вас правильно понял)))

      Ответить

      • Александр
        6 октября 2015

        спасибо... клевый код...

        Ответить

  9. vladimir
    8 декабря 2015

    Добрый день.

    подскажите как в цикле вывести ссылки с окнами, только по каждой ссылке будет открываться вкладка с соответствующими данными

    for($q=0;$q<count($ideas_id);$q++) { <div id="popup_name" class="popup popup_block"> <h2><?=$ideas_name[$q];?> </h2> <p>Любой текст,что душе угодно</p> </div> }

    Ответить

  10. Stanislav
    23 сентября 2016

    Забадалсся на вордпресс вставлять. Можно конкретно что и куда) Большое спасибо за помощь за ранее!

    Ответить

  11. Stanislav
    5 октября 2016

    В общем при подключении

    Окно работает, но пропадает меню сайта. Если не прописывать выше изложенный скрипт, то окно не работает.

    Как быть подскажите...

    Ответить

    • driver
      6 октября 2016

      Здравствуйте, Stanislav.

      Скорее всего у вас в теме присутствует какой-либо из элементов(то же меню, почему бы и нет), в работе которого необходима библиотека jQuery. WP автоматом подтягивает свою версию.

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

      Не знаю какая у вас тема, но в WP предусмотрен механизм безопасного подключения скриптов и jQuery в частности. Проверьте файл functions.php вашей темы на наличие такой функции:

      function jquery_init() { if (!is_admin()) { wp_enqueue_script('jquery'); } } add_action('wp_enqueue_scripts', 'jquery_init');

      Если отсутствует, что скорее всего, попробуйте прописать. Делается это для того чтобы избежать конфликт библиотек. Или же не подключайте дополнительную версию:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

      как расписано в статье.

      Сам плагин, исполняемый js (см. фарш в статье) прописываете в файле темы footer.php в районе закрывающего тега </body>, предварительно обернув в

      <script type="text/javascript">..фарш js..</scrip>, это если не подключаете отдельным файлом dm-modal.js

      Не видя пациента трудно его лечить ))), Надеюсь всё у вас получится.

      Ответить

  12. Павел
    15 января 2017

    Здравствуйте.

    Хорошее всплывающее окошко и пользоваться удобно, но вот с jQuery v2.2.4 не работает.

    Можно как-то поправить это или может будет новая версия данного скрипта?

    Спасибо.

    Ответить

    • driver
      15 января 2017

      Здравствуйте, Павел.

      В jQuery v2.2.4 больше не поддерживается синтаксис href^=#, чтобы всё работало необходимо заменить его на href*=\\#. Для этого в файле dm-modal.js найдите строку:

      $('a.poplight[href^=#]').click(function()

      и просто замените в ней a.poplight[href^=#] на a.poplight[href*=\\#]

      Ну, а я в свою очередь внесу изменения в статью, в демо и в архив с исходниками, так что вам спасибо за наводку, а то что-то давно не обращался к данному скрипту и не обновлял.

      Ответить

  13. Загрузить еще комментарии…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Наверх
мобильн. компьютерная