کد باکس دادن اطلاعات به کاربر با استفاده از جی کوئری

این باکس متحرک و زیبا با استفاده از jQuery حرکت می کند ، با CSS زیبا شده است و با HTML نمایش داده می شود.

شما با استفاده از این باکس زیبا می توانید باکس متحرکی را ایجاد کنید که در بالای صفحه پیامی را به کاربر می دهد. شما با بردن ماوس روی این باکس متن درون آن را به نمایش در می آورید.

برای دیدن دمو اینجا کلیک کنید.

این کد را در head قالب خود بگذارید (در صورت وجود فایل jQuery در قالب خط اول را حذف کنید):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.moisrexvib').hover(function(){ $(this).animate({'top':'-5px'}) },function(){ $(this).animate({'top':'-100px'}) }); }); </script> <style> .moisrexvib{ position:fixed; top:-100px; width:20%; margin:0 40% 0 40%; height:110px; color:#fff; text-align:justify; direction:rtl; padding:5px; font:12px tahoma; border:2px #000 solid; border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius:0 0 10px 10px; text-shadow:0px 0px 5px; -moz-text-shadow:0px 0px 5px; -o-text-shadow:0px 0px 5px; -ms-text-shadow:0px 0px 5px; -khtml-text-shadow:0px 0px 5px; -webkit-text-shadow:0px 0px 5px; background: -moz-linear-gradient( top center, red, #c10000, #ae0000 ); background: -webkit-linear-gradient( top center, red, #c10000, #ae0000 ); background: -o-linear-gradient( top center, red, #c10000, #ae0000 ); background: -khtml-linear-gradient( top center, red, #c10000, #ae0000 ); background: -ms-linear-gradient( top center, red, #c10000, #ae0000 ); background: linear-gradient( top center, red, #c10000, #ae0000 ); } </style>

این کد را در قسمت body سایت بگذارید:

<div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/" title="کدستان">کد باکس پیام هشدار</a></div><div class="moisrexvib"> اینجا محل متن شماست. </div>