Button modal spoiler
Демо:
HTML:
<button type="button" class="button">Button</button>
CSS:
.button {
	display: inline-block;
	font: normal 14px/21px Arial, Helvetica, sans-serif;
	text-align: center;
	vertical-align: middle;
	text-decoration: none !important;
	cursor: pointer;
	border: none;
	outline: none;
	border-radius: 3px;
	padding: 6px 12px;
	margin: 0;
	background: #007FFF;
	color: #fff !important;
    user-select: none;
	-webkit-user-select: none;
    -moz-user-select: none;
	transition: .1s;
}
.button:hover {opacity: 0.8}
.button:active {opacity: 1.0}
.button:focus{outline: none}
Демо:
HTML:
<button type="button" class="button" onclick="modal('myModal')">Modal</button>

<div id="myModal" class="modal">
	<div class="modal_content">
		<div class="modal_head">
			<span class="modal_close" data-close="true" title="Close">&times;</span>
			Заголовок (modal)
		</div>
		<div class="modal_body">
			Как уже неоднократно упомянуто, элементы политического процесса и по сей день остаются уделом либералов, которые жаждут быть ограничены исключительно образом мышления. Но постоянный количественный рост и сфера нашей активности способствует подготовке и реализации системы обучения кадров, соответствующей насущным потребностям. Следует отметить, что социально-экономическое развитие влечет за собой процесс внедрения и модернизации прогресса профессионального сообщества. А также базовые сценарии поведения пользователей представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть подвергнуты целой серии независимых исследований.
		</div>
		<div class="modal_foot">
			В рамках спецификации
			<div>
				<button type="button" class="button" data-close="true">Закрыть</button>
			</div>
		</div>
	</div>
</div>
CSS:
.modal {
	display: none;
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal_content {
	padding: 0 15px;
	position: relative;
	margin: 15px auto;
	padding: 0;
	max-width: 600px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	border-radius: 6px;
	opacity: 1;
	transition: opacity 0.4s;
	animation-name: modalopen;
	animation-duration: 0.4s;
}
.modal_head {
	background-color: #f5f5f5;
	border-bottom: 1px solid #ddd;
	padding: 13px;
	font-size: 16px;
	font-weight: 500;
	border-radius: 6px 6px 0 0;
}
.modal_body {
	background-color: #fff;
	line-height: 22px;
	padding: 15px;
}
.modal_foot {
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	border-radius: 0 0 6px 6px;
	padding: 13px;
	font-size: 16px;
	font-weight: 500;
}
.modal_foot div {
	float: right;
	margin: -6px -6px 0 0;
}
.modal_close {
	color: #bbb;
	float: right;
	font-size: 24px;
	font-weight: bold;
}
.modal_close:hover,.modal_close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
@keyframes modalopen {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
JS:
function modal(id) {
	var modal = document.getElementById(id);
	var close = document.querySelectorAll('[data-close="true"]');
	modal.style.display = "block";
	for (var i = 0; i < close.length; i++) {
		close[i].onclick = function() {
			modal.style.display = "none";
		}
	}
	window.onclick = function(e){
		if (e.target == modal) {
			modal.style.display = "none";
		}
	};
	document.onkeydown = function(e) {
		if (e.keyCode == 27) {
			modal.style.display = "none";
		}
	};
}
Демо:
Скрытый текст (Вариант 1)
Содержимое спойлера...
Скрытый текст (Вариант 2)
Содержимое спойлера...
HTML:
<!-- Вариант 1 -->
<details>
	<summary>Скрытый текст (Вариант 1)</summary>
	<div>Содержимое спойлера...</div>
</details>

<!-- Вариант 2 -->
<div class="spoiler">
	<div class="spoiler-head folded">Скрытый текст (Вариант 2)</div>
	<div class="spoiler-body">Содержимое спойлера...</div>
</div>
CSS:
/* Вариант 1 */
details {
	width: 100%;
	display: block;
	margin: 0 0 10px 0;
	background: #e9e9e6;
	border: 1px solid #c3cbd1;
	font: 13px/19.5px Tahoma, Geneva, sans-serif
}
summary {
	display: block;
	padding: 3px 8px;
	font-weight: bold;
	cursor: pointer;
	font-size: 12px;
	line-height: 18px;
}
details div {
	border-top: 1px solid #c3cbd1;
	background: #f5f5f5;
	padding: 5px 10px;
}
details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}
details > summary:before {
	content: "►";
	margin-right: 4px;
	font-size: 12px;
}
details[open] > summary:before {
	content: "▼";
	margin-right: 4px;
	font-size: 12px;
}

/* Вариант 2 */
.spoiler {
	width: 100%;
	display: block;
	margin-bottom: 10px;
	background: #e9e9e6;
	border: 1px solid #c3cbd1;
	font: 13px/19.5px Tahoma, Geneva, sans-serif
}
.spoiler-head {
	font-size: 12px;
	line-height: 18px;
	padding: 3px 8px;
	font-weight: bold;
	cursor: pointer;
	margin-left: 9px;
}
.spoiler-body {
	padding: 5px 10px;
	display: none;
	border-top: 1px solid #c3cbd1;
	background: #f5f5f5;
}
.folded {
	display: block;
	background: transparent url(data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=) no-repeat left center;
	padding-left: 14px; 
}
.unfolded {
	display: block;
	background: transparent url(data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw==) no-repeat left center;
	padding-left: 14px;
}
JS:
// Вариант 2 (jQuery)
$(document).on("click", ".spoiler-head", function() {
    $(this).toggleClass("unfolded");
	$(this).next(".spoiler-body").slideToggle("fast");
});
Вариант 1 (минимальный):
* {
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
}
Вариант 2 (Eric Mayer)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
Вариант 3 (Yahoo)
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
Вариант 4 (Normalize.css)
<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Простая страница</title>
	<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABGUlEQVRIiWNgIAAiFh/ws1t+9c+spatfEIM7p815R8hMhOHzD3qbrrrzz3zVnf/EgjnL1jwkyXCdNY//U90CZMOpbgG64VS1AJvhyBb8+/fv/9+/f7FioixwWnb5t9Wq2//Rsdvq62DN2/Ye/D9t4XKs+O7DR4QtAEkSHRbkBBHMgm/fv/+///gJSRikh2gLXrx+83/z7v0kYZCewRNEb9+9/3/o5BmS8LsPH4m34OOnz/8vXL1BEv70+csgCqInz1/8X7puC0n42YtXxFvw6/fv/2/ffyAJg/QMniC69+jJ/ynzl5KEHz55Noh88OPnz//PX73GimHpnSILQCli9ZadWPFhYKai2AKaBxHNLAA1OYhtnhDbbAEAW/m2A3OUSQkAAAAASUVORK5CYII=">
	<style>
	* {
		padding: 0;
		margin: 0;
		border: 0;
		outline: 0;
		box-sizing: border-box;
	}
	
	body {
		background: #E2E1E0;
		color: #222;
		font: 14px/21px Verdana, Geneva, sans-serif;
	}
	
	p {
		margin-bottom: 15px;
	}

	.wrap {
		max-width: 960px;
		margin: 0 auto;
	}
	
	.page {
		margin: 30px 15px;
		background: #fff;
		padding: 15px;
		border-radius: 6px;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}
	
	@media screen and (max-width: 768px) {
		.page {
			margin: 15px;
		}
	}
	</style>
</head>
<body>
	
<div class="wrap">
	<div class="page">
		<p>Приятно, граждане, наблюдать, как непосредственные участники технического прогресса неоднозначны и будут разоблачены. Таким образом, дальнейшее развитие различных форм деятельности предполагает независимые способы реализации новых принципов формирования материально-технической и кадровой базы. Следует отметить, что повышение уровня гражданского сознания не оставляет шанса для новых предложений. Наше дело не так однозначно, как может показаться: внедрение современных методик обеспечивает актуальность кластеризации усилий. Также как экономическая повестка сегодняшнего дня позволяет оценить значение системы обучения кадров, соответствующей насущным потребностям.</p>
		<p>Принимая во внимание показатели успешности, сплочённость команды профессионалов играет определяющее значение для укрепления моральных ценностей. Безусловно, реализация намеченных плановых заданий прекрасно подходит для реализации новых предложений. Безусловно, постоянное информационно-пропагандистское обеспечение нашей деятельности предполагает независимые способы реализации инновационных методов управления процессами. Разнообразный и богатый опыт говорит нам, что синтетическое тестирование однозначно фиксирует необходимость системы обучения кадров, соответствующей насущным потребностям. Как принято считать, ключевые особенности структуры проекта призваны к ответу. Наше дело не так однозначно, как может показаться: новая модель организационной деятельности не оставляет шанса для новых принципов формирования материально-технической и кадровой базы.</p>
		<p>Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм деятельности способствует повышению качества стандартных подходов. Следует отметить, что высококачественный прототип будущего проекта позволяет выполнить важные задания по разработке новых предложений.</p>
		А ещё ключевые особенности структуры проекта призывают нас к новым свершениям, которые, в свою очередь, должны быть разоблачены. Сложно сказать, почему непосредственные участники технического прогресса, инициированные исключительно синтетически, объявлены нарушающими общечеловеческие нормы этики и морали. Повседневная практика показывает, что перспективное планирование обеспечивает актуальность направлений прогрессивного развития. Каждый из нас понимает очевидную вещь: высокое качество позиционных исследований представляет собой интересный эксперимент проверки экспериментов, поражающих по своей масштабности и грандиозности.
	</div>
</div>
	
</body>
</html>
HTML
<button type="button" id="toTop">Наверх</button>
CSS
#toTop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 9999;
}
JS (jQuery)
let toTop = $("#toTop");
$(window).scroll(function () {
	if ($(this).scrollTop() > 100) {
		toTop.fadeIn();
	} else {
		toTop.fadeOut();
	}
});
toTop.click(function (e) {
	e.preventDefault();
	$("body,html").animate({scrollTop: 0}, 100);
});
Поделиться:
IP-адрес: 34.239.154.240
Часовой пояс: Asia/Almaty
Подробнее

Сервисы

Страницы