Skip links

Explore
Drag

ایجاد باکس پیام گوشه سایت

سلام.

خیلی اوقات  داخل بعضی از سایت ها که میرید میبیند که گوشه سایتشون یه کادری هستش

زمانی بر روی اون کادر کلیک میکنید یه کادر دیگ وسط صفحه باز میشه که

از شما یه درخواستی داره یا میخواد یه کاری انجام بدید، ما بهش میگیم باکس پیغام! 🥴

خلاصه مطلب اینکه زمانی که برروی اون کلیک میکنید یک عکس العملی نشون میده.

کدهاشون براتون میذارم خودم خیلی وقت پیش از این کدها برای سایت های مشتریان و.. استفاده میکردم برای موارد دیگه.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#search").click(function(){
$("#search-form").fadeToggle();
});
$("#sms, #sms-2").click(function(){
$(".subscribe").fadeToggle();
});
$("#close").click(function(){
$(".subscribe").fadeToggle();
});
});
</script>

<div class="subscribe" style="display: none;">
<img id="close" src="http://........./images/close.gif" alt="close" title="بستن">
<p id="subscribe-sms"><img src="http://ttp://........./images/subscribe-sms.gif" alt="subscribe-sms" title="کادر ثابت"></p>
<p id="subscribe-sms">حالا اون متن و يا فرمي که مد نظرتون هست داخل اين قالب قرار بديد !!</p>
<p id="subscribe-sms"><a href="http://cpfa.ir">www.cpfa.ir</a></p>
</div>
<div class="subscribe-sms-fixed" id="sms-2">
<img src="http://ttp://........./images/mobile.gif" alt="subscribe-sms" title="دکمه شما">
<p>دکمه شما</p>
</div>

داخل کدهای بالا شما سه تا پسوند با نام GIF دارید که باید عکس هایی ک مد نظر هستش رو بذارید..اون عکس هارو دلخواه خودتون رو بذارید، سایزش رو یا نوشتم یا اینکه باید به صورت تستی انجامش بدید ولی ترجیحا کوچیک باشه.

.input, #subscribe_name, #subscribe_mobile {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid #DDDDDD;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0 0 5px #EEEEEE inset;
 color: #555555;
 margin: 5px 0;
 padding: 5px;
 text-shadow: 1px 1px #FFFFFF;
 transition: all 0.2s linear 0s;
}
#subscribe_mobile {
 direction: ltr;
}
.submit, #submit, #submit_newsletter {
 background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;
 border: 1px solid #DDDDDD;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0 0 5px #EEEEEE inset;
 color: #555555;
 padding: 5px;
 text-shadow: 1px 1px #FFFFFF;
}
.submit:hover, #submit:hover, #submit_newsletter:hover {
 background: linear-gradient(to bottom, #E5E5E5 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
 cursor: pointer;
}
.subscribe {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 11px solid #555555;
 border-radius: 10px 10px 10px 10px;
 direction: rtl;
 display: none;
 position: fixed;
 right: 40%;
 top: 20%;
 z-index: 2;
}
#subscribe-sms {
 text-align: center;
 font-family:tahoma;
 font-size:12px;
 width:250px;
}
.subscribe-sms-fixed {
 background:#00a4ed;
 border-bottom: 1px solid #BBBABA;
 border-radius: 5px 5px 5px 5px;
 bottom: 33px;
 color: #FFFFFF;
 left: 30px;
 opacity: 0.7;
 padding: 5px;
 position: fixed;
 text-align: center;
 transition: all 0.2s linear 0s;
 font-family:tahoma;
 font-size:9px;
 padding-bottom:5px;
}
.subscribe-sms-fixed:hover {
 border-bottom: 1px solid #4ACCFF;
 color: #FFFFFF;
 cursor: pointer;
 opacity: 1;
}
.subscribe-sms-fixed p {
 font-weight: bold;
}
.subscribe-sms-fixed p:hover {
}
#subscribe {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 0 none !important;
}
#subscribe tr {
}
#subscribe td {
color:#000000;
 border-bottom: 1px dashed #EEEEEE;
 padding: 5px 12px;
}
#close {
 position: absolute;
 right: 3px;
 top: 2px;
}
#close:hover {
 cursor: pointer;
}

 

 

:: دموشو میتونید اینجا ببینید ::

Leave a comment