hamid64_rs
جمعه 08 آبان 1388, 03:20 صبح
در طراحی صفحات وب فقط با کد جاوا اسکریپ و دستور alert میشه یه پیغام رو بصورت پنجره متداول ویندوزی به کاربر نشون داد .این روش در قدیم خیلی معمول بود اما امروز با کمک css روش دیگه ای بوجود اومده که این امکان رو به کاربر میده که پنجره پیغام رو هرجور که دلش میخاد طراحی کنه نه صرفا به شکل پنجره های معمول ویندوزی (که محدودیت بسیاری داره ).در این روش یک div بصورت absolute تعریف میشه و کدهای پنجره ای رو که میخاین نمایش داده بشه داخلش قرار میدین :
<"div id="light" class="white_content" dir="rtl" runat="server>
</br/><br>اطلاعات با موفقیت درج شد</br>
<a/>بازگشت<"a href="redirect_page.aspx>
<div/>
<div id="fade" class="black_overlay" runat="server"></div>
Div اول (light) حاوی کد html مربوط به پنجره هست که هرطور خواستین میتونین طراحیش کنین و هرچی خواستین میتونین داخلش قرار بدین در مثال من یه پنجره کوچیکه که داخلش یه پیغام و یه لینک برای رفتن به یه صفحه دیگه هست .div دوم باعث میشه که هنگام نمایش پیغام صفحه بطور نیمه شفاف کدر بشه بطوری که کنترلهای زیرین پیغام غیرقابل دسترسی خواهند بود .راستی دوتا style زیر رو هم در head صفخه قرار بدین (مربوط به شکل div ها میشن)
.black_overlay}
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
{
.white_content}
display: none;
position: absolute;
top: 35%;
left: 35%;
width: 25%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
{
همونطور که در style هردوتا div میبینید مقدار display هردو برابر با none هست که این باعث میشه هیچکدوم نمایش داده نشن .حالا باید کاری کرد که هنگامی که مثلا روی دکمه insert کلیک شد و صفحه postback کرد پنجره نمایش داده بشه .برای این کار در event مربوط به دکمهinsert بعد از اینکه کدهای مربوط به درج تموم شد کد زیر رو بنویس :
;"light.Style["display"] = "block
fade.Style["display"]="block";
میبینی که این روش خیلی آسون و کم دردسریه که به لطف css فراهم شده .