QR-код для ссылки на страницу

Пример:

HTML:

<button class="qrcodebtn">Показать QR-код ссылки</button>

1	<button class="qrcodebtn">Показать QR-код ссылки</button>

CSS:

.qrcodebg,
.qrcodedata {
	position: fixed;
	z-index: 9999999;
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;	
	background: rgba(0,0,0,0.8);
	display: none;
}
.qrcodedata {
	background: transparent;
	top: -120vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
	transition: top 0.3s;
	pointer-events: none;
}
.qrcodeexit {
	color: #FFF;
	float: right;
	font-size: 40px;
	margin: 20px 40px;
	cursor: pointer;
	dipslay: inline-block;
}	
.qrcodetext {
	background: #FFF;
	pointer-events: auto;
	padding: 40px;
	border-radius: 6px;
	text-align: center;
}	
.qrcodetext p {
	line-height: 1.3;
	margin: 0 0 40px 0;
}	
.qrcodeloader {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 250px;
	height: 250px;
	position: relative;
}
.qrcodeload {
	width: 88px;
	height: 88px;
	border: 4px solid #6ebeff;
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
.qrcodeload:after {
	content: '';  
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 6px solid;
	border-color: #337AB7 transparent;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
} 
@media (max-width:991px){
	.qrcodeexit {
		font-size: 20px;
		margin: 10px 20px;
	}
	.qrcodetext {
		padding: 20px;
	}
}
/* Кнопка */
.qrcodebtn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
}
.qrcodebtn:hover,
.qrcodebtn:active,
.qrcodebtn:focus {
	color: #FFF;
}
.qrcodebtn:after,
.qrcodebtn:before {
	position: absolute;
	height: 4px;
	left: 50%;
	background: #337AB7;
	bottom: -6px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
.qrcodebtn:before {
	top: -6px;
}
.qrcodebtn:hover:after,
.qrcodebtn:hover:before,
.qrcodebtn:active:after,
.qrcodebtn:active:before,
.qrcodebtn:focus:after,
.qrcodebtn:focus:before {
	width: 100%;
	left: 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

.qrcodebg,

.qrcodedata {

position: fixed;

z-index: 9999999;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.8);

display: none;

}

.qrcodedata {

background: transparent;

top: -120vh;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

transition: top 0.3s;

pointer-events: none;

}

.qrcodeexit {

color: #FFF;

float: right;

font-size: 40px;

margin: 20px 40px;

cursor: pointer;

dipslay: inline-block;

}

.qrcodetext {

background: #FFF;

pointer-events: auto;

padding: 40px;

border-radius: 6px;

text-align: center;

}

.qrcodetext p {

line-height: 1.3;

margin: 0 0 40px 0;

}

.qrcodeloader {

display: flex;

align-items: center;

justify-content: center;

width: 250px;

height: 250px;

position: relative;

}

.qrcodeload {

width: 88px;

height: 88px;

border: 4px solid #6ebeff;

border-radius: 50%;

display: inline-block;

position: absolute;

box-sizing: border-box;

animation: rotation 1s linear infinite;

}

.qrcodeload:after {

content: '';

box-sizing: border-box;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 60px;

height: 60px;

border-radius: 50%;

border: 6px solid;

border-color: #337AB7 transparent;

}

@keyframes rotation {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

@media (max-width:991px){

.qrcodeexit {

font-size: 20px;

margin: 10px 20px;

}

.qrcodetext {

padding: 20px;

}

/* Кнопка */

.qrcodebtn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

}

.qrcodebtn:hover,

.qrcodebtn:active,

.qrcodebtn:focus {

color: #FFF;

}

.qrcodebtn:after,

.qrcodebtn:before {

position: absolute;

height: 4px;

left: 50%;

background: #337AB7;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.qrcodebtn:before {

top: -6px;

}

.qrcodebtn:hover:after,

.qrcodebtn:hover:before,

.qrcodebtn:active:after,

.qrcodebtn:active:before,

.qrcodebtn:focus:after,

.qrcodebtn:focus:before {

width: 100%;

left: 0;

}

jQuery:

let qrok = false; 	
$('.qrcodebtn').on('click',function() {
	if (qrok === false) {
		qrok = true;    
		$('body').append('\
			<div class="qrcodebg"><div class="qrcodeexit">&#10006;</div></div>\
			<div class="qrcodedata">\
			<div class="qrcodetext">\
			<p>Для перехода на эту страницу<br>в браузере телефона<br>отсканируйте QR-код</p>\
			<div class="qrcodeloader"><div class="qrcodeload"></div></div>\
			</div>\
			</div>\
		'); 
	}
	$('.qrcodebg').fadeIn();
	$('.qrcodedata').css('top', '0');
	var image = new Image(); 
	var nric = document.location.href;
	image.src = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&amp;size=250x250';
	setTimeout(function () {
		if (image.width === 0) {
			$('.qrcodeloader').html('Ошибка при создании QR-кода');
			} else {
			$('.qrcodeloader').html('<img src="'+ image.src +'" />'); 
		}  
	}, 1000);
});
$(document).on('click','.qrcodebg',function() {
    $('.qrcodebg').fadeOut();
	$('.qrcodedata').css('top', '-120vh');
});
$(document).keyup(function(e) {
	if (e.key === "Escape" || e.keyCode === 27) {
		$('.qrcodebg').fadeOut();
		$('.qrcodedata').css('top', '-120vh');
	}
});

let qrok = false;

$('.qrcodebtn').on('click',function() {

if (qrok === false) {

qrok = true;

$('body').append('\

<div class="qrcodebg"><div class="qrcodeexit">✖</div></div>\

<div class="qrcodedata">\

<div class="qrcodetext">\

<p>Для перехода на эту страницу<br>в браузере телефона<br>отсканируйте QR-код</p>\

<div class="qrcodeloader"><div class="qrcodeload"></div></div>\

</div>\

');

}

$('.qrcodebg').fadeIn();

$('.qrcodedata').css('top', '0');

var image = new Image();

var nric = document.location.href;

image.src = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&size=250x250';

setTimeout(function () {

if (image.width === 0) {

$('.qrcodeloader').html('Ошибка при создании QR-кода');

} else {

$('.qrcodeloader').html('<img src="'+ image.src +'" />');

}

}, 1000);

});

$(document).on('click','.qrcodebg',function() {

$('.qrcodebg').fadeOut();

$('.qrcodedata').css('top', '-120vh');

});

$(document).keyup(function(e) {

if (e.key === "Escape" || e.keyCode === 27) {

$('.qrcodebg').fadeOut();

$('.qrcodedata').css('top', '-120vh');

}

});

При нажатии на кнопку с классом qrcodebtn, данный скрипт создает и открывает модальное окно. Если по истечении одной секунды мы получили изображение с api.qrserver.com QR-кода ссылки, то показываем его, в противном случае показываем ошибку
Пример использования можно увидеть на b2b медиаресурсе о розничной торговле «Точка продаж»: "QR-коды – улучшаем клиентский путь посетителя сайта" в правом фиксированном меню
Документация: QR Code Generator API

Фёдор Тимофеев: 11.12.2022 в 18:19

А зачем заморачиваться ку кодом, если в гугл хроме есть такая функция?
Нажми в адресной строке в конце справа на стрелку поделиться и вуаля. Там ВК, ватсап, твитер, ку код ...

Но вы молодец. Добавился в друзья в ВК. Рад что встретил вас.

Ответить
- Глеб: 12.12.2023 в 11:35
  
  Федор, вы правы. Но про эту возможность не все знают, а тут предлагается забота и лояльное решение для посетителя сайта - сразу на виду эта функция в удобном формате.
  
  Ответить
Станислав: 06.09.2022 в 12:18

Прикольно, но на двух сайтах пробовал установить и не открывается((

Ответить
- Alexander: 07.09.2022 в 19:31
  
  По QR перейти на страницу не получается?
  
  Ответить
  - Станислав: 13.12.2023 в 19:10
    
    Здравствуйте. Смотрю умников в комментариях везде хватает... Конечно немного перепробовав и у меня получилось ещё тогда, год назад, установив плагин jQuery Manager for WordPress. Случайно наткнулся на реплики и решил плагин этот упомянуть в комментарии.
    
    Ответить
- Владимир: 21.10.2022 в 12:01
  
  попробуй установить на страницу в виде фотографии
  
  Ответить
- Алексей: 06.11.2022 в 13:25
  
  Все устанавливается и работает великолепно, возможно просто нужны прямые руки. Установил у себя - клик
  
  Ответить

Пример:

HTML:

CSS:

jQuery:

Смотрите также:

Добавить комментарий:

Комментарии: