W3.CSS режимное
Модальное это диалоговое окно / всплывающее окно, которое отображается в верхней части текущей страницы:
Как создать модальное
пример
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> Попробуй сам " Класса "W3-модальный"
Модальное может быть любой HTML - контейнер (например, <DIV>) с классом = "W3-модальный".
Класс "W3-модальный-контента"
Все модальное содержание должны быть помещены в HTML - контейнер с классом = "W3-модальный-контента".
Содержание режимное может быть любой HTML-элемент (заголовки, параграфы, изображения и т.д.)
Открыть модальное
Используйте любой HTML элемент, чтобы открыть модальный. Это часто кнопка или ссылка.
Добавьте атрибут OnClick и указывают идентификатор модальный (id01 в нашем примере), с помощью метода document.getElementById () и указать уникальный идентификатор , который соответствует кнопке "триггер" (id01).
Закрытие модальное
Чтобы закрыть модальное, добавить класс W3-closebtn к элементу вместе с атрибутом OnClick , который указывает на идентификатор модальный (id01). Вы также можете закрыть его, нажав вне модальный (смотри пример ниже).
 | И раз; (×) представляет собой HTML-объект, который является предпочтительным значок кнопки закрытия, а не буквы "х". |
|---|
Модальные Заголовок & Footer
Внутри <DIV> с классом = "W3-модальный-контента", использование w3-контейнерных классов для создания различных секций в модальных:
пример
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div> Попробуй сам " Модальные как карточный
Для того, чтобы отобразить модальный как карты, добавьте w3-card- * класс к W3-модальной содержимого контейнера:
Анимационные модальностей
Используйте любой из w3-одушевленные-Увеличить | Вверх | нижней | право | левых классов скользить в модальный от конкретного направления:
пример
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
Попробуй сам " Вы также можете исчезать в цвет фона модальной в (W3-модальный):
Модальные изображение
Нажмите на изображение, чтобы отобразить его в полном размере:
пример
<img src="img_fjords.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_fjords.jpg">
</div>
Попробуй сам " Модальные Галерея изображений
Нажмите на картинку, чтобы увидеть его в полном размере:
пример
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Попробуй сам " Модальные Войти Форма
В этом примере создается модальным для входа в систему:
Вкладка режимное
В этом примере создается модальным с вкладками содержимым:
Закройте Modal
В приведенных выше примерах мы используем кнопку, чтобы закрыть модальный. Тем не менее, с немного JavaScript, вы можете также закрыть модальный при щелчке за пределами коробки модальный:
пример
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Попробуй сам "