کد باکسی که در وسط صفحه روی همه قالب قرار گرفته و خبری را می دهد

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

این باکس باعث می شود که شما یک باکس خاکستری رنگ (به رنگ f3f3f3) در بالای قالب خود در وسط صفحه قرار دهید که با استفاده از آن متن خبر یا توضیحاتی را درون آن به کاربر گزارش نمایید.

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

این کد را درون head صفحه قرار دهید. (اگر صفحه شما فایل jQuery دارد خط اول را حذف کنید)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function(){ $('.info').fadeIn(1000); $(".exit").click(function(){ $('.info').fadeOut(500); }); }); </script> <style> .info{ background:#f3f3f3; display:none; font:11px tahoma; direction:rtl; padding:10px; text-align:right; border:1px #000 solid; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; position:absolute; z-index:200; top: 50%; left: 50%; width:400px; height:300px; margin-top: -150px; /*set to a negative number 1/2 of height*/ margin-left: -200px; /*set to a negative number 1/2 of width*/ } .exit{ float:left; cursor:pointer; } </style>

این کد را درون body صفحه خود قرار دهید:

<div class="info"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAARISURBVHjaXJTPbxtFFMdn9pfXP9Y/Yqe2QQlFDQQCSoqgSaGVihTKpSgcKEqCmgMXkDghyn/RC0gcoFAhAWkEAg4VSHDIgVsqSEoQSEikbZASO7GS2FnH3tnffN96jaKu9HZWO28+89533hvls2KRhb7PNFVNFSqV95PJ5JDdat1wWq0VVZIYgwVhyOiROY9G3/OYbBiP68Xiu47jdA92dq4JIXa5LDMlDAImq2omV6l8ynx/rrO/z9LZ7CuqolwRe3vLUgzpPwFgeqEwrhrGUqfZHAsVheXK5WeCRmPBtqyaPJNOJ/Ll8ke+EAvt3V3mWxZzLSuTKhRe1pLJdefo6B4jKBlgqVLptJbJ3GzVamNd02TddpuyeFTP5Z5yLOtH+VXDeCjw/U/E4SGCUpgMY0jR63QyyXz+oqbr66LdvkeypEulcYId1utjruMwpqqRJKLbZX4YjoRh+IMEPZpWu70SYoKUivTCtw8AoqhyVf0yPTj4fKpYfExJp79uxbAQepEvrSHtRKfzN/5vQnV2BMDboK9iFxaQ6DQC6gHarNUqUiLxvZbN/oQNnnBsO5ojGJnfGzex7E2Isq3EWv+DneYAW4LDc/0DkChqHBpBSUNIg6OWH4T9i7XzcF+J1tArOkfON/B+Aw6/kaMPUGQAuRhdwAJ8R/9I4x6QYHME43E1SDwGxkaRzmPxLy40oEUeAUgGmBeDvN4G6/Cd5QQ7xlBMlAJ9yEhPph3CcCNjGNdQb1MQWac67FciHQBJIClKmEinP++Y5u0oG/jQRoiByS9AE7evCeBGsfh0Opf7EDU2hPR4BInnw1g3GEedjnBd/7Nlmps2NhH4b0MWiSKQ4g7Io85ShvHNXr3+rO04vH/i3jGj1ElP+IwomrY0UC5PMwA55vosNEAEO51EO+1ubz8p4tLwHoD9D8VCB9Ddra2yrGlf4Q54iSqAMpAC0AGb0A1jcWd7e4xgVOQkfCR+D7IB+909dih04hQpAqgg0i8GTpyYjoCqpmXVROLjBnrTEqIH6y/sRb+JNnzNPzq65Lnualwu0TxlQZEikCq65UZC14elwHVzzZ2dcVxDUQv1nWl3G4L7rjuvj4//oZ85U4Oms45prrqQqB9pSCdMHdVoPOI7zpD8IudW4DiDCGWKgNQRuHkYQBv66OjrA7Ozv+YuX2apc+eYOjzcRLQ/i3p9CmuGOF0OdPqkuet+h4Su8+tXrzK/21XbKysfdO7ceYfKJFGtbhRmZq4YZ8/eVkslLRBCpoU8mQz8VsvurK2dOrh166Z19+4k1WhydPTb7Pnzbyn5fFPJXrhA/flwZnLyr8Pl5fvewUEVk/upiYmFUIj3fNPMUgNEhe26vqTr7fzFi43EyZMm/AXXtFZ+enotMTycxxXX5IuLi+RbxcQppKAjEgOWQ1Q5jBnMqXGT9B8qxQ5uIBOBNCFRG3KJwLbv4//WfwIMAA5f5jL4//z0AAAAAElFTkSuQmCC" class="exit" alt=" X "> متن اخبار جدید در اینجاست ... </div>