Всплывающее окно при скачивании файла

CabinetAdmin 11 авг 2018, 16:06 Сообщение

Могу рассказать такой рецепт - обычная форма, после клика вместо названия появляется заданный отсчёт, после начнётся загрузка и опять появится название файла.

romaamor 11 авг 2018, 16:26 Сообщение

Мне надо что бы реклама показывалась.

CabinetAdmin 11 авг 2018, 17:06 Сообщение

Надо подумать...

CabinetAdmin 11 авг 2018, 20:24 Сообщение

Пока что правкой кода, поскольку расширением можно только часть сделать. Завтра выложу рецепт.

romaamor 11 авг 2018, 20:47 Сообщение

CabinetAdmin писал(а): Пока что правкой кода

Не беда, думаю разберусь. Если нет - спрошу.

CabinetAdmin 12 авг 2018, 16:49 Сообщение

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

romaamor 12 авг 2018, 17:22 Сообщение

CabinetAdmin писал(а): оно закрывается простым кликом вне окна и толку от рекламы никакой...

Так а смысл пользователю закрывать окно если он хочет скачать файл ? Он по любому будет смотреть рекламу скажем секунд 15 пока не появится ссылка на скачивание. Ссылка должна быть в окне или в новой вкладке, и отчёт времени. вот как к примеру тут - http://www.satdl.com/#section-producers

CabinetAdmin 13 авг 2018, 20:06 Сообщение

Вот что у меня сегодня получилось, на более свежую голову.

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

Открываем файл attachment.html, находим:

Код: Выделить всё

			<dt><!-- IF _file.UPLOAD_ICON -->{_file.UPLOAD_ICON} <!-- ENDIF --><a class="postlink" href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a>

и меняем на:

Код: Выделить всё

			<dt><!-- IF _file.UPLOAD_ICON -->{_file.UPLOAD_ICON} <!-- ENDIF -->
				<div class="attach_download"><a class="postlink" href="{_file.U_DOWNLOAD_LINK}" onclick="return false;">{_file.DOWNLOAD_NAME}</a></div>
				<div class="attach-modal" style="display:none">
					<div class="attach-content">
						<div title="Закрыть" class="close"><i class="icon fa-times"></i></div>
						<h2>Скачивание <strong>{_file.DOWNLOAD_NAME}</strong></h2>
						<div class="attach-ads">
							<!-- Блок с рекламой или баннером -->
						</div>
						<div id="timer_1">Ссылка будет доступна через <span class="fa-stack"><i class="icon icon-red fa-circle-o-notch fa-spin fa-fw fa-stack-2x"></i><span id="timer_num" class="fa-stack-1x" style="font-size:11px;"></span></span> сек.</div>
						<div id="timer_2" style="display:none"><a class="postlink" href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a></div>
					</div>
				</div>

Примечания.

По правильному, как учит поддержка phpbb, надо вынести слова в языковые файлы и использовать в коде переменные. Если вам плевать на это, можете смело копировать и менять как есть.
 меняем на блок с баннером или рекламой.
В нынешнем варианте ссылка на вложение ведёт на само вложение и можно его скачать без всплывающего окна путём клика правой кнопки мыши, если хочется обрубить эту возможность, то надо заменить {_file.U_DOWNLOAD_LINK} (первый код) на #.

Открываем overall_footer.html и перед </body> добавляем:

Код: Выделить всё

<script type="text/javascript">
/*
* Modal attach
* phpBB 3.1.x, 3.2.x
* Modified by:	xaocZ ( CabinetAdmin )
* Support mod:	http://cabinetadmina.ru
*/
(function($) {
	$('.attach_download').each(function() {
		var $attach = $(this),
			$attachmodal = $attach.next('.attach-modal'),
			$attachclose = $('.close'),
			timer_seconds = 10, // Число задержки в секундах
			int,
			openAttach = function() {
				$attachmodal.data('open',true).addClass('attach-open');
				int = setInterval(function() {
					if (timer_seconds > 0) {
						timer_seconds--;
						$attachmodal.find('#timer_num').text(timer_seconds);
					} else {
						clearInterval(int);
						$attachmodal.find('#timer_1').css({'display' : 'none'});
						$attachmodal.find('#timer_2').css({'display' : 'block'});
					}
				}, 1000);
				$attachclose.focus();
				return false;
			},
			closeAttach = function() {
				$attachmodal.data('open',false).removeClass('attach-open');
				clearInterval(int);
			};
		$attachclose.on('click',function(e) { e.stopPropagation(); $attachmodal.data('open',true); });
		$attach.on('click',function(e) {
			e.stopPropagation();
			if( !$attachmodal.data('open') ) {
				openAttach();
				$attachclose.on( 'click', function(e) {
					closeAttach();
				} );
			} else {
				if( $attachclose.val() === '' ) {
					closeAttach();
					return false;
				}
			}
		});
	});
})(jQuery);
</script>

Количество секунд до появления ссылки помечено комментарием // Число задержки в секундах.

Открываем common.css вашего стиля и в самый конец добавляем:

Код: Выделить всё

/* Modal attach */
.attach-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
}
.attach-modal.attach-open {
	display: block !important;
	pointer-events: auto;
}
.attach-content {
	width: 50%;
	max-width: 560px;
	min-width: 220px;
	position: relative;
	margin: 10% auto;
	padding: 3em;
	background: #fff;
	text-align: center;
}
.attach-content h2 {
	margin: 0 0 1em;
	line-height: normal;
	font-size: 1.8em;
}
.attach-ads {
	margin-bottom: 20px;
}
.attach-ads img {
	max-width: 100%;
}
.attach-content .close {
	background: #606061;
	color: #ffffff;
	line-height: 26px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	height: 24px;
	text-decoration: none;
	font-weight: 400;
	padding: 3px;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
}
.attach-content .close .icon {
	font-size: 18px;
	padding-left: 2px;
}
.attach-content .close:hover {
	background: #D31141;
}

Собственно всё.

romaamor 13 авг 2018, 22:38 Сообщение

Видать где то ошибка. Клацаю на файл - вообще не чего. Не скачевается, нет окошка.

CabinetAdmin 14 авг 2018, 19:20 Сообщение

Стили наверно не подтянулись, опять кэш?

romaamor 14 авг 2018, 20:24 Сообщение

CabinetAdmin писал(а): Стили наверно не подтянулись, опять кэш?

Нет. Кеш не причём. Само собой что чистил.

romaamor 14 авг 2018, 21:01 Сообщение

Проверил на чистом просильвире, тестовом форуме - то же самое.

CabinetAdmin 14 авг 2018, 21:03 Сообщение

Давай ссылку на тестовый, а то у меня на моём тестовом работает.

romaamor 14 авг 2018, 21:08 Сообщение

https://satelitray.ru/viewtopic.php?f=50&t=356
admin
******

Всплывающее окно при скачивании файла

romaamor

Похожие темы