С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Вывод всплывающего окна с текстом при нажатии на ссылку

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

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

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

 

И так.

Используя интегрированный скрипт http://fancybox.net/, мы соорудим HTML конструкцию из ссылки и пары div чтобы всё заработало.

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

Для начала создадим ссылку которая будет видна клиенту, и при нажатии на которую будет показываться окно, чтобы сделать такую ссылку нужно для обычной ссылки прописать дополнительный атрибут, а именно добавить data-plugin="fancybox"  т.е. обычная ссылка в HTML выглядит так:

<a href="#size">ссылка 1</a>

а ссылка которая нужна нам, будет выглядеть так:

<a data-plugin="fancybox" href="#size">ссылка 1</a>

Обратите внимание, что href у ссылки содержит текст #size - это название элемента, который будет содержать текст в окне, его рассмотрим ниже.

Далее, ниже ссылки, обычно прямо под ней, чтобы не потерять, разместим такой код:

<div style="display:none;">
   <div id="size">
 
     ...тут будет наш HTML текст...
 
   </div>
</div>
Это 2 вложенных дива (div) у верхнего прописан стиль style="display:none;", у вложенного прописан id="size", внутри мы можем указать любой HTML текст, включая картинки.
 
И так, рассмотрим пару примеров.

 

Пример 1

Для примера разместим там небольшое описание способа доставки.

Жирным отметим код который нужен для обслуживания всплывающего окна.

Получится примерно, так:

<a data-plugin="fancybox" href="#dostavka">ссылка 1</a>
 
<div style="display:none">
    <div id="dostavka">
 
       <strong>Курьером</strong> (доставка курьером осуществляется на следующий
       день после заказа<br />с 12-00 до 19-00, пожалуйста указывайте удобное время доставки).
 
       <ul>
              <li>Стоимость доставки определяется от суммы заказа:</li>
              <li>Заказ до 500р. стоимость доставки 400р.</li>
              <li>Заказ от 500р до 2000р. стоимость доставки 200р.</li>
              <li>Заказ свыше 2000р. - доставки бесплатно.</li>
       </ul>
 
    </div>
</div>

В этом примере мы назвали внутренний div как dostavka, т.е. код получился id="dostavka", можно придумать любое название, важно чтобы оно было указанно в верхней ссылке, и не было два и более одинаковых названий на странице. 

И так, разместим код на любой статической странице, и посмотрим что получилось (рис 1)

Рисунок 1.

Рисунок 2.

Получилась ссылка при нажатии на которую показывается окно с текстом, супер.

 

Пример 2

Давайте улучшим наше всплывающее окно, добавим в текст картинку. 

Однако, добавить картинку напрямую в скрытый элемент не получится, по этому вы можете временно убрать у верхнего div, его стиль display:none; тогда элемент станет виден в режиме визуализации (не в режиме источник), добавьте картинку в нужное место (вот инструкция) и затем верните элементу его display:none;

Получится примерно, так:

<a data-plugin="fancybox" href="#dostavka">ссылка 1</a>
 
<div style="display:none;">
    <div id="dostavka">
 
       <strong>Курьером</strong> (доставка курьером осуществляется на следующий
       день после заказа<br />с 12-00 до 19-00, пожалуйста указывайте удобное время доставки).
 
       <center><img src="mf2.jpg"/></center>
 
       <ul>
              <li>Стоимость доставки определяется от суммы заказа:</li>
              <li>Заказ до 500р. стоимость доставки 400р.</li>
              <li>Заказ от 500р до 2000р. стоимость доставки 200р.</li>
              <li>Заказ свыше 2000р. - доставки бесплатно.</li>
       </ul>
 
    </div>
</div>

 

Тестируем

Рисунок 3

Получилось отлично. 

 

Так же, всплывающее окно можно использовать для вывода табличных данных, например вот так (рисунок 4)

Инструкцию, как сделать таблицу, можно найти тут -
http://www.advantshop.net/help/pages/add-table

А как сделать рамку для таблицы, можно найти тут -
http://www.advantshop.net/help/pages/table-border

Рисунок 4

 

Два и более всплывающих окна

Чтобы вставить 2 и более окон на одну страницу, разместите код друг за другом, но обязательно укажите уникальный id для элементов, в противном случае по всем ссылкам будет открываться только одно окно.

Получится примерно, так:

<a data-plugin="fancybox" href="#okno1">ссылка 111</a>
 
<div style="display:none">
    <div id="okno1">
        ...текст для окна 111...
    </div>
</div>
 
<a data-plugin="fancybox" href="#okno2">ссылка 222</a>
 
<div style="display:none">
    <div id="okno2">
        ...текст для окна 222...
    </div>
</div>
 

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

Все готово.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.