no-img
اِمیلا

نمایش پیغام و هشدار پاپ اپ به کاربران

انتشار؛ 19 فوریه 2020،
48 روز پیش
کد نویسی

با استفاده از کد زیر می توانید پیام های دلخواهتان را در قالب یک پاپ آپ باکس بسیار زیبا به کاربران نمایش دهید، امکان استفاده از تصاویر, ویدیو, کدهای HTML و … را نیز دارا می باشد و ظاهری با ظاهری بسیار زیبا باعث جلب توجه کاربران شما خواهد شد.

برای استفاده از این پاپ آپ می توانید کد زیر را در مکان مورد نظرتان قرار دهید :

<style>
<!--
.mwsModal {
	text-align:right;
	direction:rtl;
	font-family:tahoma;
	font-size:12px;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.mwsModal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
	border-radius: 8px;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
.close {
    color: white;
    float: left;
    font-size: 22px;
    font-weight: bold;
	margin-top:3px;
	margin-left:-5px;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.mwsModal-header {
    padding: 2px 16px;
    background-color: #C90000;
    color: white;
	border-radius: 5px 5px 0 0;
	border-bottom: 3px solid #7F0000;
}
.mwsModal-body {padding: 2px 16px;}
.mwsModal-footer {
    padding: 2px 16px;
    background-color: #404040;
    color: white;
	border-radius: 0 0 5px 5px;
}
-->
</style>

<div id="milipinkmanAlert" class="mwsModal">
	<div class="mwsModal-content">
		<div class="mwsModal-header">
			<span class="close">×</span>
			<h2 style="font-family:tahoma; font-size:12px; font-weight:bold;">عنوان پیغام</h2>
		</div>
		<div class="mwsModal-body">
			<p style="text-align:justify; direction:rtl; line-height:200%;">
				<img src="https://emila.ir/file/image/public/alarm.png" alt="Alarm" title="Alarm" style="float:left;" />
				<b>نمونه فرم پاپ آپ نمایش پیام به کاربران</b>
				<br /><br />
				این متن یک متن با ساختار بی معنا صرفاً به منظور تست نوشتاری می باشد
				این متن یک متن با ساختار بی معنا صرفاً به منظور تست نوشتاری می باشد
				این متن یک متن با ساختار بی معنا صرفاً به منظور تست نوشتاری می باشد
				.
			</p>
		</div>
		<div class="mwsModal-footer">
			<h3 style="font-family:tahoma; font-size:10px; font-weight:normal;">طراحی و کدنویسی شده توسط <a href="https://emila.ir" target="_blank" style="color:#FFFFFF; text-decoration:none;">emila</a></h3>
		</div>
	</div>
</div>

<script>
var mwsModal = document.getElementById('milipinkmanAlert');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
    mwsModal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == mwsModal) {
        mwsModal.style.display = "none";
    }
}
</script>

متن درون کد را با متن جایگزین خود عوض کنید.

لینک کوتاه : https://emila.ir/?p=21192
سلام علیکم!
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم