Модальное окно

Содержание

атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

Открытие нескольких модальных окон не поддерживается

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

Размещение разметки модального окна

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

Предостережения для мобильных устройств

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

Демо

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

Launch demo modal

Сделать модальности можно

Не забудьте добавить и , ссылаясь на модальное окно Заголовок, чтобы , и к сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с на .

Встраивание видео YouTube

Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.

Bower installation

Run this command to install component.

Required dependencies will be installed with the current package automatically.

How to include the module on your page?

Paste the following code to the head tag of your site:

// ModalFly Plugin
script src="/jquery-modalfly/dist/jquery.modalfly.min.js">script>
// ModalFly Plugin Styles
link rel="stylesheet" href="/jquery-modalfly/dist/jquery.modalfly.min.css" />

// jQuery Module
script src="http://code.jquery.com/jquery-2.1.4.min.js">script>

// Bootstrap CSS Framework
script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
$.modalfly(, );

Usage

Styles:

Include the jquery.modal css file in your html page.

link href="jquery.modal.css" type="text/css" rel="stylesheet" />

Javascript:

Include the jQuery library and jquery.modal script file in your html page.

script src="http://code.jquery.com/jquery-latest.min.js">script>
script src="jquery.modal.min.js">script>

The function is called ‘modal’. So just call it 😉

$.modal({
	type 'inverted', //Type of Modal Box (alert | confirm | prompt | success | warning | error | info | inverted | primary)
	title 'Message', //Modal Title
	text 'Text', //Modal HTML Content
	size 'normal', //Modal Size (normal | large | small)
	buttons [{
		text 'OK', //Button Text
		val 'ok', //Button Value
		eKey true, //Enter Keypress
		addClass 'btn-light-blue', //Button Classes (btn-large | btn-small | btn-green | btn-light-green | btn-purple | btn-orange | btn-pink | btn-turquoise | btn-blue | btn-light-blue | btn-light-red | btn-red | btn-yellow | btn-white | btn-black | btn-rounded | btn-circle | btn-square | btn-disabled)
		onClick function(dialog) {
			console.log(dialog);
			alert('Look in console!');
			return true;
		}
	}, ],
	center true, //Center Modal Box?
	autoclose false, //Auto Close Modal Box?
	callback null, //Callback Function after close Modal (ex: function(result){alert(result); return true;})
	onShow function(r) {}, //After show Modal function
	closeClick true, //Close Modal on click near the box
	closable true, //If Modal is closable
	theme 'atlant', //Modal Custom Theme (xenon | atlant | reseted)
	animate false, //Slide animation
	background 'rgba(0,0,0,0.35)', //Background Color, it can be null
	zIndex 1050, //z-index
	buttonText {
		ok 'OK',
		yes 'Yes',
		cancel 'Cancel'
	},
	template '




',
	_classes {
		box '.modal-box',
		boxInner ".modal-inner",
		title '.modal-title',
		content '.modal-text',
		buttons '.modal-buttons',
		closebtn '.modal-close-btn'
	}
});

Параметры и настройки. Более детальное рассмотрение Remodal.

Дополнительные параметры можно передавать внутри атрибута data-remodal-options корневого элемента всплывающего окна (div.remodal). Например: data-remodal-options=»hashTracking: false, closeOnOutsideClick: false»

Давайте ознакомимся с ними:

  • hashTracking (Default: true) — для открытия модального окна используется значение атрибута data-remodal-target ссылки, вместо href.
  • closeOnConfirm (Default: true) — если значение этого параметра равно true, модальное окно исчезнет после клика по кнопке OK
  • closeOnCancel (Default: true) — если значение этого параметра равно true, модальное окно исчезает после клика по кнопке Cancel
  • closeOnEscape (Default: true) — если значение этого параметра равно true, модальное окно исчезает при нажатии кнопки Esc.
  • CloseOnOutsideClick (Default: true) – если значение этого параметра равно true, модальное окно исчезает при клике в любом свободном месте страницы.
  • Modifier (Default: ») — используется для изменения CSS-классов модального окна, фонового блока и «обертки».

Глобальные настройки

HTML

  • NAMESPACE — основной HTML-класс модальных окон. CSS-код должен быть обновлен с учетом этого класса.
  • DEFAULTS — расширение основных настроек.

Инициализация с помощью JavaScript — есть возможность инициализировать Remodal с помощью JavaScript. Если вы выбираете этот вариант, то использовать класс remodal не нужно.

HTML

Remodal

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

Методы объекта Remodal. Перед тем, как вызывать различные методы, получаем экземпляр объекта модального окна и сохраняем его в переменной:

JavaScript

	var inst = $('').remodal();

	/*Открываем модальное окно*/
	inst.open();
	/*Закрываем модальное окно*/
	inst.close();
	/*Получаем текущее состояние окна @returns {'closed'|'closing'|'opened'|'opening'} */
	inst.getState();
	/*Уничтожаем объект модального окна*/
	inst.destroy();

События Remodal, которые можно обрабатывать.

JavaScript

	$(document).on('opening', '.remodal', function () {
	  console.log('Modal is opening');
	});

	$(document).on('opened', '.remodal', function () {
	  console.log('Modal is opened');
	});

	$(document).on('closing', '.remodal', function (e) {

	  // Reason: 'confirmation', 'cancellation'
	  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
	});

	$(document).on('closed', '.remodal', function (e) {

	  // Reason: 'confirmation', 'cancellation'
	  console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));
	});

	$(document).on('confirmation', '.remodal', function () {
	  console.log('Confirmation button is clicked');
	});

	$(document).on('cancellation', '.remodal', function () {
	  console.log('Cancel button is clicked');
	});

CSS-классы плагина.

  • .remodal — класс модального окна по-умолчанию
  • .remodal-wrapper — дополнительная «обертка» к .remodal, применяется для корректного позиционирования блока.
  • .remodal-overlay — класс для блока с затемнением. Находится над .remodal-wrapper.
  • .remodal-bg — фоновый блок модального окна. Находится над блоком с затемнением.

Префикс remodal может быть заменен на другой путем изменения глобальных настроек плагина.

Состояние объекта модального окна отражается в следующих классах: .remodal, .remodal-overlay, .remodal-bg, .remodal-wrapper.
Например, .remodal-is-opening, .remodal-is-opened, .remodal-is-closing и .remodal-is-closed.

Классы .remodal, .remodal-overlay, .remodal-bg, .remodal-wrapper можно переопределять, указав модификатор в настройках плагина при инициализации. Например, в атрибуте data-remodal-options.

В заключении заметки хотелось бы сделать вывод: Remodal – довольно полезный инструмент, который поможет при создании новых проектов или обновлении старых. За счет интересного дизайна и анимационных эффектов при появлении модальных окон, этот инструмент можно использовать и при создании landing pages. Также плюсами Remodal — являются его «вес» и возможность адаптации под различные размеры экранов, в том числе и мобильных устройств.

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

Демо-страница

При создании заметки использовалась информация с https://github.com/VodkaBears/Remodal

Критика

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

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

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

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

Создание окна, модального относительно рабочего стола, могло нарушить доступность всей системы в целом. Например, такая функция была предусмотрена в Microsoft Windows 3.x, и , однако была убрана из NT и последующих версий, и модальность окна относительно системы больше не блокировала доступ к ней.

Во всех ОС Microsoft Windows открытое модальное окно полностью блокирует взаимодействие с родительским окном, в том числе не позволяя изменить его размеры, переместить в другое место на экране или свернуть. В некоторых случаях из-за недоработок программного обеспечения, модальные окна при переключении задач могут оказаться позади родительского окна, из-за чего какое-либо взаимодействие с программой становится невозможным.

При большом количестве открытых приложений становится сложно определить родительское окно, особенно если в заголовке модального окна недостаточно информации для этого (например, открыто несколько одинаковых приложений). Для этого приходится делать попытки взаимодействия со всеми окнами, пока не найдётся заблокированное.

Модальное окно joomla с помощью bootstrap

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

Достаточно скопировать код и вставить в статью в режиме html, как показано на сайте разработчика. Я немного изменил этот код на русские заголовки.

Открыть модально 

Там же можно найти еще много различных компонентов для отображения информации в модальном окне.

Есть и другие, более сложные возможности сделать тоже самое, например с помощью php, jquery и пр.

Пожалуй на этом стоит остановиться. Это наиболее простые и доступные варианты не только для joomla, но и других cms.

На этом пока все.

Назначение

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

Потребовать от пользователя ввод какой-либо информации — начиная от простого «да/нет» до большого количества настроек или данных, необходимых для продолжения работы с родительским окном или приложением;
Привлечь внимание пользователя к чему-либо важному. Этот вариант часто критикуется специалистами по эргономике, потому что редко это важно настолько, чтоб блокировать работу приложения целиком, но, тем не менее, продолжает использоваться по той причине, что он существенно более лёгок в реализации;
Указать пользователю на невозможность отмены выполняемого им действия и потребовать подтверждения этого действия
Этот вариант тоже критикуется, вместо него рекомендуется обеспечить возможность отмены.

Getting Started

  • Install with bower:
  • Or download the latest release zip file

Add script and style

Include css & js file in your html head:

link rel="stylesheet" type="text/css" href="/dist/jquery.niftymodals.css">
script src="/dist/jquery.niftymodals.js">script>

Modal Markup

Modals have a required markup in order to apply the necessary styles:

div class="md-container md-effect-1" id="your-modal-id">
	div class="md-content">
		
	div>
div>
div class="md-overlay">div>

You’ll need to create the modal overlay just after the modal element:

Calling modal by tag attribute

You can use this option by adding the class to an element, for example a button or link. You also need to specify the modal id using the data attribute like this:

a class="md-trigger" data-modal="modal-id">Show Modala>

Show modal using JavaScript

This option only requires the basic modal markup and the you can show the modal like this:

$('#button-id').on('click',function(){
  $('#modal-id').niftyModal();
});

To use this method you’ll be able to set some additional options and apply them to the modal:

$('#modal-id').niftyModal({
    overlaySelector '.md-overlay',//Modal overlay class
    closeSelector '.md-close',//Modal close element class
    classAddAfterOpen 'md-show',//Body control class
    //This object will be available in the modal events
    data {
      some_data ''
    },
    //This option allow to attach a callback to a button with the class 'md-close'
    buttons [
      {
        class 'btn-ok',
        callback function ( btn, modal, event ) {
          //You can cancel the modal hide event by returning false
          alert("You need to check your info!");
          return false;
        }
      },
      {
        class 'btn-cancel',
        callback function ( btn, modal, event ) {
          //You can access to the mocal data here
          var modal_data = modal.data.some_data;
        }
      }
    ],
    beforeOpen function( modal ){
      //You can cancel the modal show event by returning false
    },
    afterOpen function( modal ){
      //Executed after show event
    },
    beforeClose function( modal ){
      //You can cancel the hide event by returning false
    },
    afterClose function( modal ){
      //Executed after hide event
    }
});

Setting defaults

You can set the default options like this:

$.fn.niftyModal('setDefaults',{
	overlaySelector '.modal-overlay',
	closeSelector '.modal-close',
	classAddAfterOpen 'modal-show',
});

Integrate with bootstrap modals style

In order to integrate with bs modals style you’ll need to load the css bootstrap adapter instead of the default one:

link rel="stylesheet" type="text/css" href="/dist/jquery.niftymodals.bootstrap.css">

This file contains only the essential css, this way you can use the bs classes like , & .

0.5.2 (2013-01-26)

  • Add a new event when I receive data via AJAX to become informed when the dialog is up and running (2ca8ae5)
  • Added AJAX_BEFORE_SEND and AJAX_SUCCESS events. (fbe9437)
  • Added example to demo. Minified js. (d9145ff)
  • Added some AJAX spinners. (f0b47e1)
  • Added spinner custom events (9af1c83)
  • Added spinner support (2fc94c7)
  • Bug fixing (6267f6f)
  • Bumped to 0.5.1 — new Ajax complete event. (da3509a)
  • Bumped to v0.3.0 (requires jQuery 1.7) (148d228)
  • Bumped to v0.4 (0c7da49)
  • Changed bind/unbind and live with on/off methods (421516e)
  • changed event name (b32de0b)
  • demodemo (cd84ce3)
  • Issue #20: Added AJAX_FAIL event. (4c72b25)
  • made plugin chainable (71b7f03)
  • Manually bringing in 9f11170 from adrianolaru (closes #4 and #10) (7786e73), closes #4 #10
  • Manually fix #17 (Made code more object oriented) (bd4331c), closes #17
  • Merge branch ‘master’ of github.com:kylefox/jquery-modal into ajax (9c7c9cd)
  • Merge pull request #10 from adrianolaru/change-public-api (168e30a)
  • Merge pull request #11 from adrianolaru/bugfixing (87d4e6b)
  • Merge pull request #13 from adrianolaru/bugfixing (f2fa333)
  • Merge pull request #16 from adrianolaru/bugfixing (33a06fa)
  • Merge pull request #18 from RyanonRails/patch-1 (bb12f5a)
  • Merge pull request #20 from adrianolaru/spinner (eb2dadc)
  • Merge pull request #21 from adrianolaru/spinner (a4a325d)
  • Merge pull request #22 from dei79/master (3f68f34)
  • Merge pull request #8 from adrianolaru/new-events-methods (ba3cda3)
  • Merge pull request #9 from adrianolaru/bugfixing (b86be47)
  • Minor bug fixing (2865c27)
  • Missing comma 😀 (89977d2)
  • Missing words in README! ()
  • Moved static methods from $.fn.modal to $.modal (9f11170)
  • no newline at end of file (3983c79)
  • Nuke .DS_Store (f04077f)
  • One spinner style is sufficient. (5005ae8)
  • Only create spinner where necessary, remove from DOM when «hidden» (40bae80)
  • opt out the spinner (449671d)
  • Option for adding additional classes to the close button (cdfb863)
  • Renamed AJAX events, updated README to document spinner & ajax events. (c53fca7)
  • Resolves #30: Added explicit MIT license (a7feb44), closes #30
  • Should fix #34 (Multiple Modals) without breaking anything… (84b9e74), closes #34
  • Update README & examples to show that manually opened AJAX modals must be wrapped in a div with clas (810f8d7)
  • updated README (eab14ef)
  • v0.3.1 (4dd79d3)
  • Version 0.5 — AJAX feedback UI & events. (cb76e3c)
  • When invoking manually, make sure the $ selection is not empty (f750f2a)

Интерфейс управления элементом Modal area в конструкторе форм Chronoforms 6

Интерфейс управления элементом Modal area в конструкторе форм Chronoforms 6 представляет собой комбинацию из трех частей:

  1. Собственные настройки элемента. Расположены в самом верху и открываются отдельно, по нажатию на лиловый значок метки.
  2. Редактор настроек для popup окна. Располагается посередине. Открывается отдельно, по нажатию на голубой значок шестеренки.
  3. Область контейнера. Расположена в самом низу и развернута по умолчанию. Предназначена для размещения в ней полей формы, которые и требуется отобразить в модальном окне. По нажатию на элемент «body» оранжевого цвета область контейнера можно свернуть.

Рис. 1

  • Собственные настройки элемента:

    1. «Метка конструктора» (Designer label) — служебная метка, которая больше нигде не отображается, кроме как в окне редактирования.
    2. «Имя» (Name) — имя DOM элемента, используемое при его обработке скриптами. Должно быть уникальным, без пробельных или спецсимволов.
  • Редактор настроек для popup окна:

    1. «Заголовок модального окна» (Popup header) — заголовок, отображаемый при показе всплывающего окна с формой на сайте.
    2. «Показывать при загрузке страницы» (Show on page load) — переключатель, представляющий собой один из вариантов отображения popup окна. Если установлен в положение «Да» (Yes) — то форма будет показана немедленно по событию load той страницы, где она расположена.
    3. «Показать через X милисекунд» (Display after x miliseconds) — поле настроек с типом «строка», также являющееся одним из вариантов показа формы. Значение должно быть представлено в формате целого числа (integer) без указания единицы измерения. Если в этом поле есть некоторое значение, то форма будет отображена через указанное количество миллисекунд после загрузки страницы сайта, где она расположена.
    4. «Показать по клику…» (Display on click of) — один из вариантов показа, в случае использования которого форма будет отображена по клику на элемент-триггер, селектор которого указан в поле. Триггером может быть любой элемент DOM, присутствующий на странице с формой, не обязательно входящий в состав ее содержимого. Селектор класса или идентификатора должен иметь соответствующие символы — точку (если указывается класс) или решетку (если — идентификатор).
    5. «Показать после скроллинга на X пикселей» (Display after scroll space) — поле настроек с типом «строка». Также один из вариантов отображения формы. Значение должно быть представлено в формате целого числа (integer) без указания единицы измерения. Если в этом поле есть некоторое значение, то форма будет отображена после скроллинга вниз на указанное количество пикселей той страницы сайта, где она расположена.
    6. «Размер модального окна» (Modal size) — переключатель размера окна, имеющий три варианта: «Full screen», «Small», «Smaller» и «Smallest».
    7. «Базовый шаблон» (Basic layout) — переключатель шаблонов, предлагающий два варианта — «Да» (Yes) и «Нет» (No). Если установлен в положение «Нет», то всплывающее окно отображаться не будет, т. к. данный шаблон не имеет фрейма для отображения модальных окон.
    8. «Светлый фон» (Light background) — переключатель, также предлагающий два варианта. Определяет цвет «подложки» под модальным окном. Если установить в положение «Да» — фон будет светлым, иначе будет использоваться темный фон.
    9. «Вне тела документа» (Detachable) — переключатель, определяющий расположение контейнера модального окна в структуре DOM. Если установлен в положение «Да», то фрейм будет расположен перед закрывающим тегом body.
    10. «Скроллинг контента» (Scrollable content) — настройка, позволяющая устанавливать возможность скроллинга содержимого формы в тех случаях, когда оно превышает высоту экрана. Если переключатель установлен в положение «Нет», то высота формы, а следовательно и высота модального окна, будет увеличена автоматически в соответствии с высотой контента.
    11. «Возможность закрыть окно» (Scrollable content) — эта настройка отвечает за возможность для пользователя закрывать окно с формой по клику на любую область вне ее (фон фрейма, расположенного слоем ниже).
    12. «Иконка „Закрыть“» (Close icon) — переключатель отображения иконки «Закрыть» (представляет собой крестик в правом верхнем углу формы). Если его значение — «Нет», то иконка отображаться не будет.
  • Область контейнера:

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

Настройки, описанные в пунктах списка 4–7 не сочетаются между собой и не могут применяться одновременно, за исключением поля «Показывать при загрузке страницы» со значением «Нет», которое может применяться совместно с каким-либо одним из остальных вариантов.

More advanced AJAX handling

Simply bypass the default AJAX handling (i.e.: don’t use )

a href="ajax.html" rel="ajax:modal">Click me!a>

and make your AJAX request in the link’s click handler. Note that you need to manually append the new HTML/modal in the callback:

$('a').click(function(event) {

  $.ajax({

    url $(this).attr('href'),

    success function(newHTML, textStatus, jqXHR) {
      $(newHTML).appendTo('body').modal();
    },

    error function(jqXHR, textStatus, errorThrown) {
      // Handle AJAX errors
    }

    // More AJAX customization goes here.

  });

  return false;
});

Note that the AJAX response must be wrapped in a div with class when using the second (manual) method.

Bugs & Feature Requests

Found a bug? MEH!

Have an idea that improves jquery-modal? Awesome! Please fork this repository, implement your idea (including documentation, if necessary), and submit a pull request.

I don’t use this library as frequently as I used to, so if you want to see a fix/improvement you’re best off submitting a pull request. Bugs without a test case and/or improvements without a pull request will be shown no mercy and closed!

Редактирование файла style.css.

В файле style.css прописываем стили для нашего модального окна.

.modal_div {
   width: 300px;
   height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
   border-radius: 5px;
   border: 3px #000 solid;
   background: #fff;
   position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
   top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
   left: 50%; /* пoлoвинa экрaнa слевa */
   margin-top: -150px;
   margin-left: -150px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
   display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
   opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
   z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
   padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
   width: 21px;
   height: 21px;
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   display: block;
}
/* Пoдлoжкa */
#overlay {
   z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
   position:fixed; /* всегдa перекрывaет весь сaйт */
   background-color:#000; /* чернaя */
   opacity:0.8; /* нo немнoгo прoзрaчнa */
   -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
   filter:alpha(opacity=80);
   width:100%;
   height:100%; /* рaзмерoм вo весь экрaн */
   top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
   left:0;
   cursor:pointer;
   display:none; /* в oбычнoм сoстoянии её нет) */
}

0.2.5 (2012-02-03)

Fix

  • Fix: modal position should be fixed, not absolute. (5bc6c9f)

  • 0.1 «release» (30732cc)

  • Actual min/pack versions (38d3e66)

  • Added ‘closeText’ option & bumped patch version. (effbffb)

  • Added $.modal.resize(). All it does at the moment is re-centre the modal (because there is no fixed (b191b8c)

  • Added an image … sigh. Bumped version to 0.2.1 (will start doing patch version increments for m (3da2f27)

  • Added auto-binding based on «rel» attributes and an example page. (54377f4)

  • Added basic working version. (2518eef)

  • Added detection for AJAX links, updated README. (468194e)

  • Added escape-key binding, update example. (fc63faf)

  • Added events (99aa155)

  • Added link to README. (e74bf96)

  • combined calls to $.addclass (7c415ad)

  • Events are now triggered on the modal element itself. Modals are automatically bound to links with (a49bf8c)

  • Fix #7: pass jQuery to anonymous function and accept as ‘$’ in argument (4321d01), closes #7

  • fix bug with escapeClose option (d83677c)

  • Fix issue #2 — «Close» button element wasn’t being removed when modal was closed. (8998d63), closes #2

  • Fixed #3 (use outerHeight), bumped to 0.2.3. Also dropped the packed file. (e399651), closes #3

  • Link back to repo ()

  • make regex negligibly faster (c56fe3e)

  • Merge pull request #5 from elidupuis/master (31c14a2)

  • Merge pull request #6 from elidupuis/master (0e1cadc)

  • Moved examples into examples/ (c420fdc)

  • README LIVES (f207b12)

  • remove current class on modal close (77fbf5f)

  • some stuffs. (a47db2c)

  • Updated README (ajax + events) (5f576e4)

  • Updated README, renamed some files. (2bafca0)

  • Updated README. (1865c30)

  • Version 0.2 (b89392f)

  • Version bump ()

  • wrap ajax content in div (59c58be)

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его и «преодолены»). В примере есть заголовок модального компонента, тело (требуется для ), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

«Живое» демо

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

Запустить модальное окно

Статический фон

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

Запустить модальное окно

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

Запустить модальное окно

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

Запустить модальное окно

Вертикальное центрирование

Добавьте в чтобы вертикально центрировать модальное окно.

Вертикально-центрированное модальное окно

Вертикально-центрируемое прокручиваемое модальное окно

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

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

Запустить модальное окно

Использование сетки

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

Запустить модальное окно

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте и атрибуты (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по читайте инфо по .

Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap

Изменение анимации

Переменная определяет состояние преобразования перед анимацией постепенного появления, переменная определяет преобразование в конце модального появления анимация.

Если вы хотите, например, анимацию увеличения, вы можете установить .

Анимация при удалении

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

Динамическая высота

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

Доступность

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

Встраивание видео из YouTube

Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.

Ссылка на основную публикацию