php Фиксированныйблок，которыйпоявляетсякакмагия

Posted 2021-05-05

.islip {
	  display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}

#mobile_lip, #desktop_lip {
	z-index: 99999;
	box-sizing: border-box;
	text-align: center;
	display: none;
	position: relative;
	background-color: #fff;
}

.lip_container {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 10px;
	top: auto;
}

.close_lip {
	position: absolute;
	top:  -40px;
	right: 0px;
	height: 36px;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 36px;
	color:  #fff;
	text-align: center;
	background-color: #065674;
	font-size: 85%;
	cursor: pointer;
}

jQuery(document).ready(function($) {
	// Плавающий блок РСЯ
	function show_lip() {
		var need_ad = "#desktop_lip";
		if (document.body.clientWidth <= 550) {
			need_ad = "#mobile_lip";
		}
		$(need_ad).show();
	}
	setTimeout(show_lip, 15000);

	$('.close_lip').click(function(event) {
		$('#desktop_lip, #mobile_lip').hide();
	});
});

		<div class="lip_container">
			<div id="desktop_lip">
				<div class="close_lip">Закрыть рекламу</div>
				<!-- ТУТ РЕКЛАМНЫЙ КОД ДЛЯ ДЕСТОПОВ -->
			</div>
		</div>

		<div class="lip_container">

			<div id="mobile_lip">
				<div class="close_lip">Закрыть рекламу</div>
				<!-- ТУТ РЕКЛАМНЫЙ КОД ДЛЯ МОБИЛЬНИКОВ -->
			</div>
		</div>