Модальное окно: https://materializecss.com/modals.html
modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
Документация: https://materializecss.com/sidenav.html
-->
<nav>
<div class="nav-wrapper">
<div class="container">
<a href="#" class="brand-logo">
<img src="img/logo.png" id="mylogo" alt="">
</a>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="active"><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
<li><a class="modal-trigger" href="#modal1">Модальное окно</a></li> <!-- Ссылка на модальное окно-->
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="slide-out">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
<li><a class="modal-trigger" href="#modal1">Модальное окно</a></li>
</ul>
<!-- Документация для карусели: https://materializecss.com/carousel.html -->
<div>
<div class="carousel carousel-slider">
<a href="#one!" class="carousel-item"><img src="img/1.jpg" alt=""></a>
<a href="#two!" class="carousel-item"><img src="img/2.jpg" alt=""></a>
<a href="#three!" class="carousel-item"><img src="img/3.jpg" alt=""></a>
</div>
</div>
<!-- Адаптивность 2. -->
<div class="container">
<div class="row">
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
</div>
</div>
<!-- Документация по paralax: https://materializecss.com/parallax.html -->
<!-- Паралакс - при прокрутке сайта меняется положение изображения. -->
<div class="parallax-container">
<div class="parallax">
<img src="img/1.jpg">
</div>
</div>
<div class="section white">
<div class="row container">
<h1 class="header">Paralax</h1>
<p class="grey-text text-darken-3 lighten-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, blanditiis, deserunt dolor sit magnam a at voluptatibus officia reiciendis aspernatur.
</p>
</div>
</div>
<!-- Паралакс №2 -->
<div class="parallax-container">
<div class="parallax">
<img src="img/2.jpg">
</div>
</div>
<!-- Модальное окно: https://materializecss.com/modals.html -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal header</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellat, dignissimos, unde dolores cupiditate nisi saepe doloribus aspernatur at totam iste nobis quaerat vel amet quia ipsa sunt eius quod accusamus reiciendis corrupti pariatur ullam impedit adipisci maxime modi doloremque!
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
// Активируем адаптивное меню для мобильных устройств.
// Документация: https://materializecss.com/sidenav.html
$(document).ready(function(){
$('.sidenav').sidenav();
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true, // кружочки индикаторов
duration: 300, // длительность анимации перехода
noWrap: true, // если фото закончились, те не будет перехода к 1-му фото и прохождение круга снова
});
// Активируем паралакс.
$('.parallax').parallax();
// Активируем модальное окно.
$('.modal').modal({
dismissible: false, // нельзя закрыть окно, щелкнув по темной части экрана
opacity: .9, // прозрачность затеменнной области за модальным окном
inDuration: 300, // длительность анимации при появлении модального окна
outDuration: 300, // длительность анимации при исчезновении модального окна
startingTop: '20%', // растояние появления окна от верха страницы
endingTop: '20%', // исчезание окна
});
});
</script>
</body>
</html>
Файл style.css
/* Изменим цвет меню */
nav {
background: #803c42;
}
#mylogo {
width: 50px;
}
body {
height: 1000px;
}
#mypic {
width: 100px;
height: 80px;
}
/* Изменим высоту паралакс-контейнера. По умолчанию она 500 px */
.parallax-container {
height: 300px;
}
modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
Документация: https://materializecss.com/sidenav.html
-->
<nav>
<div class="nav-wrapper">
<div class="container">
<a href="#" class="brand-logo">
<img src="img/logo.png" id="mylogo" alt="">
</a>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="active"><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
<li><a class="modal-trigger" href="#modal1">Модальное окно</a></li> <!-- Ссылка на модальное окно-->
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="slide-out">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
<li><a class="modal-trigger" href="#modal1">Модальное окно</a></li>
</ul>
<!-- Документация для карусели: https://materializecss.com/carousel.html -->
<div>
<div class="carousel carousel-slider">
<a href="#one!" class="carousel-item"><img src="img/1.jpg" alt=""></a>
<a href="#two!" class="carousel-item"><img src="img/2.jpg" alt=""></a>
<a href="#three!" class="carousel-item"><img src="img/3.jpg" alt=""></a>
</div>
</div>
<!-- Адаптивность 2. -->
<div class="container">
<div class="row">
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
</div>
</div>
<!-- Документация по paralax: https://materializecss.com/parallax.html -->
<!-- Паралакс - при прокрутке сайта меняется положение изображения. -->
<div class="parallax-container">
<div class="parallax">
<img src="img/1.jpg">
</div>
</div>
<div class="section white">
<div class="row container">
<h1 class="header">Paralax</h1>
<p class="grey-text text-darken-3 lighten-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, blanditiis, deserunt dolor sit magnam a at voluptatibus officia reiciendis aspernatur.
</p>
</div>
</div>
<!-- Паралакс №2 -->
<div class="parallax-container">
<div class="parallax">
<img src="img/2.jpg">
</div>
</div>
<!-- Модальное окно: https://materializecss.com/modals.html -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal header</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellat, dignissimos, unde dolores cupiditate nisi saepe doloribus aspernatur at totam iste nobis quaerat vel amet quia ipsa sunt eius quod accusamus reiciendis corrupti pariatur ullam impedit adipisci maxime modi doloremque!
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
// Активируем адаптивное меню для мобильных устройств.
// Документация: https://materializecss.com/sidenav.html
$(document).ready(function(){
$('.sidenav').sidenav();
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true, // кружочки индикаторов
duration: 300, // длительность анимации перехода
noWrap: true, // если фото закончились, те не будет перехода к 1-му фото и прохождение круга снова
});
// Активируем паралакс.
$('.parallax').parallax();
// Активируем модальное окно.
$('.modal').modal({
dismissible: false, // нельзя закрыть окно, щелкнув по темной части экрана
opacity: .9, // прозрачность затеменнной области за модальным окном
inDuration: 300, // длительность анимации при появлении модального окна
outDuration: 300, // длительность анимации при исчезновении модального окна
startingTop: '20%', // растояние появления окна от верха страницы
endingTop: '20%', // исчезание окна
});
});
</script>
</body>
</html>
Файл style.css
/* Изменим цвет меню */
nav {
background: #803c42;
}
#mylogo {
width: 50px;
}
body {
height: 1000px;
}
#mypic {
width: 100px;
height: 80px;
}
/* Изменим высоту паралакс-контейнера. По умолчанию она 500 px */
.parallax-container {
height: 300px;
}
Комментариев нет:
Отправить комментарий