Сайт

Всплывающее окно для сайта html: Всплывающее (модальное) окно на HTML и CSS

24.01.2023

Pop-up (вплывающие окна) — Документация docs.cs-cart.ru 4.3.x

Предыдущая статья Следующая статья

Содержание

  • 1. Открываем блок во всплывающем окне по клику
  • 2. Любую страницу в pop-up окне (по Ajax)
  • 3. Используем готовый SMARTY шаблон (common/popupbox.tpl)
  • 4. Всплывающее окно с формой
  • 5. Открыть всплывающее окно при загрузке страницы
  • 6. Как сделать уникальные ID для всплывающих окон

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

Чтобы проверить примеры, создайте простой HTML блок с поддержкой SMARTY любой части сайта.

Ссылка, которая откроет pop-up блок должна иметь классы:

  • cm-dialog-opener
  • cm-dialog-auto-size — размер окна будет соответствовать содержимому.

ID блока который необходимо открыть задаётся параметром data-ca-target-id.

ID блока должен быть уникальным.

Пример:

<a data-ca-target-id="open_id">Ссылка-открывашка</a>
<div title="Заголовок окна">
    <p>
        Я люблю тебя больше, чем Море, и Небо, и Пение,<br/>
        Я люблю тебя дольше, чем дней мне дано на земле.<br/>
        Ты одна мне горишь, как звезда в тишине отдаления,<br/>
        Ты корабль, что не тонет ни в снах, ни в волнах, ни во мгле.
    </p>
</div>

Результат клика по ссылке:

Можно открыть любую страницу или шаблон контроллера в pop-up окне.

Также, как в примере выше, только дополнительно указывается href c URL необходимой страницы.

Пример SMARTY блока:

<a href="{"pages.view?page_id=10"|fn_url}" data-ca-target-id="open_id_ajax" >Диалог Ajax</a>
<div  title="Загловок окна"></div>

Результат клика по ссылке:

Сделаем форму, которая будет открываться по клику на ссылку. Форма будет отправлять данные на ваш контроллер используя Ajax.

Пример SMARTY блока:

{capture name="content_for_popup"}
<form name="my_form" action="{""|fn_url}" method="post">
    <div>
        <label for="name">{__("your_name")}</label>
        <input size="50" type="text" name="form_data[name]" value="" />
    </div>
    <div>
        <div>
            {include file="buttons/button.tpl" but_name="dispatch[my_controller.request]" but_text=__("submit") but_role="submit" but_meta="ty-btn__primary ty-btn__big cm-form-dialog-closer ty-btn"}
        </div>
        <div>
            <a >Закрыть</a>
        </div>
    </div>
</form>
{/capture}
{include file="common/popupbox.tpl" text="Заголовок" content=$smarty.capture.content_for_popup link_text="Название ссылки"}

Результат клика по ссылке:

Добавьте блоку класс cm-dialog-auto-open

, тогда pop-up откроется при открытии страницы.

Чтобы окно не открывалось каждый раз, добавляйте данный класс при особых условиях, например, в зависимости от параметра в URL (или от сессии посетителя).

Пример SMARTY блока, окно будет открыто если в URL есть параметр ?open_love=Y:

<divY"}cm-dialog-auto-open cm-dialog-auto-size{/if}" title="Заголовок окна">
    <p>
        Помню. Книгу раскрыв, ты чуть-чуть шелестела страницами.<br/>
        Я спросил: «Хорошо, что в душе преломляется лед?»<br/>
        Ты блеснула ко мне, вмиг узревшими дали, зеницами.<br/>
        И люблю — и любовь — о любви — для любимой — поет.
    </p>
</div>

Результат клика по ссылке:

Ссылки открывают всплывающие окна по ID , соответственно у каждого окна должен быть уникальный ID . Если будет несколько блоков с одинаковым ID, то это приведёт к одновременному открытию двух и более окон.

Если вы добавляете всплывающее окно через блок, то можно использовать массив {$block}, который содержит информацию о блоке, в том числе {$block. blocl_id}.

Распечатаёте в своём SMARTY блоке

{$block|fn_print_r}

Вы увидите:

Используйте значение для id из массива, например, {$block.blocl_id}.

Пример:

<a data-ca-target-id="my_block_id_{$block.block_id}">Ссылка-открывашка</a>
<div title="Заголовок окна">
    <p>
        Блок
    </p>
</div>

Видео уроки Photoshop, HTML, CSS, PHP

Меню сайта

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0


Форма входа

Навигационное меню курса по созданию всплывающих окон.

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

В курс вошли 3 урока общей продолжительностью 37 минут 31 секунда.

Урок 1 — Вступительный. (3 минуты 59 секунд)

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

Урок 2 — Создаем всплывающее окно с формой подписки.
Продолжительность: 14 минут 7 секунд

Из данного урока Вы узнаете:

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

Какие программы Вам понадобятся для наиболее быстрого создания всплывающего окна.

Урок 3 — Создаем привлекающие внимание всплывающие окна.
Продолжительность: 19 минут 25 секунд

Из данного урока Вы узнаете:

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

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

Как избавиться от самого большого недостатка этих всплывающих окон (неоправданно большие размеры выходного файла). В процессе изучения урока, Вы увидите, как можно уменьшить размер полученного окошка в 5 раз практически без потери в качестве! (если Вы не усвоите данный момент, то часть посетителей просто не дождутся появления Вашего всплывающего окна).

Реклама

всплывает HTML-файл по клику

спросил

Изменено 6 лет назад

Просмотрено 6к раз

Я пытаюсь открыть html-страницу при нажатии на ссылку во всплывающем окне Я профан в html. Я пытался читать много источников с помощью таких методов, как лайтбокс, jquery и т. д., с которыми я совсем не знаком.

В настоящее время у меня есть страница (poem.html), которая переходит на 2-ю страницу (jbn. html). Но я хочу, чтобы он всплывал.

Для html5 я обнаружил, что диалог является стандартным методом, но найденный мной пример не включает внешний html-файл. Я должен написать все внутри тега диалога. Но для моей цели было бы лучше, если бы я мог открыть внешний файл. Минимальный пример для этого:

поэма.html: 

 
      <голова>
        Бангла Кобита
      
      <тело>
        <дел>
          <дел>
          <дел>
            
XYZ
 
            <ол>
               
  • abc
    •