PDA

View Full Version : نمایش پیام ویژه



mohamadali1374
پنج شنبه 31 فروردین 1391, 21:22 عصر
سلام دوستان ؛من بلد که چه جوری یه پیام ساده مثل
print "<script>alert('شما به صورت غير مجاز وارد اين صفحه شده ايد')</script>";
ایجاد کنم اما چطوری می تونم یه پیام سفارشی مثل عکس زیر بر روی صفحه ایجاد کنم ؟



86014

iker-casillas
پنج شنبه 31 فروردین 1391, 21:49 عصر
سلام
این پیام ها رو با دستودات ساده جاوااسکریپت نمیشه ایجاد کرد
شما به دو تا DIV نیاز دارید
یکی برای بکگراند
یکی برای محتویات

اونی که تو بکگراند کشیده می شه opacity پایین داره تا صفحه رو مات کنه
DIV دوم هم که وسط کشیده میشه باید از DIV اول بیرون باشه چون اگه داخلش باشه شفافیتش (opacity) کم میشه
برای DIV کم شفافیت استایل های زیر لازمه

position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
z-index: 15000;
filter: alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;


البته این DIV باید بدون والد در BODY باشه BODY هم باید height برابر 100 درصد داشته باشه


یه مطلب دیگه هم اینکه این تکنیک lightbox نام داره (برای اینکه در موردش بتونید تو google سرچ کنید گفتم):چشمک:

armsoftpc
پنج شنبه 31 فروردین 1391, 21:52 عصر
به نام خدا
با سلام
دوست عزیز اول شما باید به سایت http://jqueryui.com/ و فریم ورک jqueryui رو روی سایتت ضمیمه کنی (البته قبلش باید خود jquery رو از سایت jquery.com گرفته باشی.) بعد کد ها زیر را وارد کنی.

<script> $(function() { $( "#dialog" ).dialog(); }); </script> <div class="demo"> <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> <form> <input value="text input"><br> <input type="checkbox">checkbox<br> <input type="radio">radio<br> <select> <option>select</option> </select><br><br> <textarea>textarea</textarea><br> </form> </div><!-- End sample page content --> </div><!-- End demo --> <div style="display: none;" class="demo-description"> <p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> </div><!-- End demo-description -->