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

Leave a Comment / Html / By /

Содержание

Установка свойств всплывающих окон HTML для слоёв пространственных объектов—Справка

  • Установка свойств отображения всплывающих окон HTML
  • Типы отображаемого содержимого HTML
  • Публикация всплывающих HTML окон в ArcGIS Explorer

Многие слои карты в ArcGIS используются для организации доступа к различным атрибутам и прочей информации по каждому из объектов. Один из способов доступа – предоставление всплывающих окон HTML, которые появляются при щелчке на каком-либо объекте. Это потенциально является эффективным способом для передачи информации в формате HTML, например в виде веб-содержания, о каждом объекте.

Всплывающие окна HTML позволяют пользователям видеть форматированное содержание, включая веб-страницы, как на рисунке, по ссылкам URL, активируемым по щелчку на объекте карты. Особенно это актуально для слоев, которые вы планируете передавать другим пользователям в виде пакетов, чтобы пользователи могли таким образом получить подробную информацию об объектах при открытии пакетов в ArcGIS Desktop или ArcGIS Explorer Desktop.

Их также используют, если вы передаёте данные друг другу в виде KML. И наконец, выражение всплывающего окна HTML обслуживается в вашей карте, если вы используете ArcGIS Server. Доступ к этим выражениям могут получать пользователи вашего картографического сервиса в определенных веб-приложениях и настольных клиентах, таких как ArcGIS Desktop и ArcGIS Explorer.

Вы можете отображать информацию об объектах, хранимую в формате HTML, в таких приложениях, как ArcMap, ArcGlobe или ArcScene, используя всплывающие окна. Чтобы сделать это, вам будет нужно сперва установить свойства отображения HTML для слоя объектов. Как только вы определитесь с информацией, которую будете отображать, вы можете щелкнуть на объекте карты с помощью инструмента HTML Pop-up, чтобы открыть окно, содержащее информацию в формате HTML.

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

Установка свойств отображения всплывающих окон HTML

Для определения свойств всплывающих окон HTML для слоя используется диалоговое окно Свойства слоя (Layer Properties). Выполните следующие шаги:

  1. Щелкните правой кнопкой на слое, чтобы открыть диалоговое окно Свойства слоя (Layer Properties) и нажмите на закладку HTML Popup.
  2. Поставьте отметку Показать содержание слоя, используя окно HTML (Show content for this layer using the HTML Popup tool).
  3. Выберите тип отображения HTML, которое хотите использовать. Существует три варианта, что показано ниже: В следующей части раздела дана подробная информация о настройках каждого типа.
  4. Отметьте опцию Отображать описания кодированных значений в содержании HTML (Display coded value description in all HTML content), если вы хотите, чтобы в окне HTML отображалось описание атрибутивного значения в случае использования домена кодированных значений, например ‘Широкая труба, пластик’ вместо кодированного значения.
  5. Чтобы проверить содержание окна HTML, щелкните кнопку Проверить (Verify).

Типы отображаемого содержимого HTML

В виде таблицы с видимыми полями

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

На закладке Поля (Fields) диалогового окна Свойства слоя (Layer Properties) можно задать видимость полей, порядок их отображения, альтернативные имена полей и другие свойства.

Использование отображаемого выражения (display expression) – При применении видимых полей можно дополнительно построить отображаемое выражение, которое будет использоваться во всплывающих HTML. Например, можно построить отображаемое выражение для округов, включающее в себя название округа, название штата и население, взятые из полей в атрибутивной таблице объектов. В этом случае отображаются три поля: POPDENSITY, MALE и FEMALE, которые показаны с использованием их альтернативных имен.

Для построения отображаемого выражения используйте закладку Отображение (Display) в диалоговом окне Свойства слоя (Layer Properties). Нажмите на кнопку Выражение (Expression), чтобы открыть диалоговое окно Отображаемое выражение (Display Expression), и создайте выражение.

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

Более подробно о вложениях в класс пространственных объектов

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

<img src=’C:\DATA\Images\PICTURE1.jpg’ />

В виде URL

Всплывающие окна HTML могут показывать содержимое, открывающее по URL через интернет. Наиболее частое применение URL – ссылка на страницы HTML. Значение, берущееся из одного из атрибутов слоя, становится частью выражения URL. На приведенном ниже рисунке показано использование данной опции для отображения всплывающего окна, содержащего статью из Википедии о городе, название которого было получено из атрибутивной таблицы слоя объектов. Название города возвращается как свойство, когда пользователь щелкает на объекте в изображении карты при помощи инструмента HTML Popup.

Поле названия города – одно из свойств HTML pop-up, которые заданы для слоя городов.

Чтобы использовать эту опцию, вы должны построить выражение. Выражение для этого случая не сложное: Префикс + Поле + Суффикс = URL закончен (Prefix + Field + Suffix = Complete URL).

Пример 1: Префикс задан как http://training.esri.com/gateway/index.cfm?fa= и значение поля: catalog.gateway. Окно HTML скомбинирует префикс со значением поля, чтобы получить URL: http://training.esri.com/gateway/index.cfm?fa=catalog.gateway. В этом примере для построения URL суффикс не нужен.

Пример 2: Вы задали префикс как http://training.esri.com/gateway и значение поля index. В этом случае вам необходим также суффикс, чтобы получить URL. Для этого URL использован суффикс – .cfm. Полный URL выглядит так: http://training.esri.com/gateway/index.cfm.

В виде пользовательского всплывающего окна

Эта опция форматирует страницу, основываясь на шаблоне Extensible Style Language (XSL). Таким образом, всплывающее окно загружается с информацией в формате HTML, но на основе стандарта шаблона XSL. Форматирование HTML, хранимое в виде атрибутов в слое, будет использовано тогда, когда значения из атрибутивного поля будут отображаться во всплывающем окне. Эта расширенная опция позволяет вам создавать пользовательские HTML–ресурсы, например создавать всплывающие изображения, гиперссылки и видео. Примеры шаблонов можно посмотреть в папке HTMLPopup в директории <install drive>:\Program Files\ArcGIS\Desktop10.2\Styles.

Публикация всплывающих HTML окон в ArcGIS Explorer

Можно использовать пакеты слоев (layer packages) в качестве одного из способов публикации всплывающих окон HTML для слоев в ArcGIS Explorer.

Pop-up (вплывающие окна) — Документация docs.cs-cart.ru 4.2.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>

Создать всплывающее окно Javascript

Создать всплывающее окно

С помощью этого онлайн-инструмента можно создать HTML-код для всплывающего окна.

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

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

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

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

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

Сделать всплывающее окно

Измените приведенные ниже значения размера и внешнего вида, а затем нажмите кнопку «Создать код».

Сценарий всплывающего окна появится в поле под кнопкой вместе с всплывающей ссылкой для тестирования.

URL-адрес:

Строка меню: Панель инструментов: Место нахождения: Полосы прокрутки: Статус:

Ширина: Высота: Изменяемый размер:

Код всплывающего окна

Скопируйте код всплывающего окна из поля ниже

Создание всплывающих окон в современных браузерах

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

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

Мне кажется, что в настоящее время Chrome не подавляет полосы прокрутки во всплывающем окне, когда вы устанавливаете полосы прокрутки на «нет» или «0». В Chrome полосы прокрутки для всплывающего окна появятся, когда содержимое больше, чем размер всплывающего окна, и вы запретили отображение полос прокрутки.

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

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

//Добавьте следующий код в заголовок HTML всплывающего окна: