رفتن به مطلب
انجمن تخصصی برنامه نویسی میلاد ورک شاپ
miladworkshop

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

پست های پیشنهاد شده

1540759288_alert-banner.png
 

شاید برای شما هم پیش اومده باشه بخوایید موضوع مهمی رو به اطلاع کاربران سایتتون برسونید, در نگه اول ممکنه بخوایید از کدی مثل کد زیر استفاده کنید :

<script>alert("متن پیام");</script>

این روش بسیار ساده و کاربردی هست, اما چند مشکل اساسی داره, از جمله, توجه کمی رو جلب میکنه, امکان استفاده از تصاویر و کدهای HTML رو نداره و در نهایت ظاهر ساده و ابتدایی رو داره

اما امروز نمونه کدی واستون نوشتم که با استفاده از اون میتونید پیام های دلخواهتون رو در قالب یک پاپ آپ باکس بسیار زیبا به کاربرانتون نمایش بدید که امکان استفاده از تصاویر, ویدیو, کدهای 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="miladWorkShopAlert" class="mwsModal">
	<div class="mwsModal-content">
		<div class="mwsModal-header">
			<span class="close">&times;</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://miladworkshop.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="http://miladworkshop.ir" target="_blank" style="color:#FFFFFF; text-decoration:none;">میلاد مالدار</a></h3>
		</div>
	</div>
</div>

<script>
var mwsModal = document.getElementById('miladWorkShopAlert');
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>

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×