ساخت پنجره های Popup با جی کوئری

amininho · 2012 , July 27

پنجره‌های Popup از پرکاربرد ترین مواردی هستند که توی طراحی‌ها امروزه استفاده می‌شن و برای ایجاد چنین پنجره‌هایی پلاگین‌های خیلی زیادی نوشته شده که پلاگین Reveal از نظر زیبایی و سادگی استفاده جزو بهترین‌هاست .

برای استفاده از این پلاگین ابتدا اون فایل‌های مورد نظرمون رو به صفحه پیوست می‌کنیم.
[h=3]پیوست فایل‌های مورد نیاز

HTML:

<script src="jquery.min.js" type="text/javascript"></script> 
<script src="jquery.reveal.js" type="text/javascript"></script>

[h=3]بخش CSS سپس از دستورات css زیر برای زیباترکردن پنجره باز شده استفاده می‌کنیم :

کد:

.big-link { 

    display:block; 
    margin-top: 100px; 
    text-align: center; 
    font-size: 12px; 
    color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=06f]#06f[/URL] 
} 
.reveal-modal-bg { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000]#000[/URL] 
    background: rgba(0,0,0,.8); 
    z-index: 100; 
    display: none; 
    top: 0; 
    left: 0; 
} 
.reveal-modal { 
    visibility: hidden; 
    top: 100px; 
    left: 50%; 
    margin-left: -300px; 
    width: 520px; 
    background: #eee url(modal-gloss.png) no-repeat -200px -80px; 
    position: absolute; 
    z-index: 101; 
    padding: 30px 40px 34px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -box-shadow: 0 0 10px rgba(0,0,0,.4); 
} 
.reveal-modal.small { 
    width: 200px; 
    margin-left: -140px; 
} 
.reveal-modal.medium { 
    width: 400px; 
    margin-left: -240px; 
} 
.reveal-modal.large { 
    width: 600px; 
    margin-left: -340px; 
} 
.reveal-modal.xlarge { 
    width: 800px; 
    margin-left: -440px; 
} 
.reveal-modal .close-reveal-modal { 
    font-size: 22px; 
    line-height: .5; 
    position: absolute; 
    top: 8px; 
    right: 11px; 
    color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=aaa]#aaa[/URL] 
    text-shadow: 0 -1px 1px rbga(0, 0, 0, .6); 
    font-weight: bold; 
    cursor: pointer; 
}

[h=3]بخش HTML مرحله بعد کد html مربوط به پنجره Popup رو بعد از تگ <body> سایت قرار میدیم :

PHP:

<div id="myModal" class="reveal-modal"> 
    <h4>ساختن پنجره های Pop Up با جی کوئری</h1>     <p>تارمستر | طعم خوش وبمستری</p>     <a class="close-reveal-modal">×</a> </div>

[h=3]استفاده از پلاگین برای استفاده از پلاگین از دو روش می‌شه استفاده کرد. روش اول استفاده از صفت html مخصوص پلاگین هست که به صورت زیر استفاده میشه :

HTML:

<a href="#" data-reveal-id="myModal">کلیک کنید</a>

دقت کنید که مقداری که به این صفت میدیم با ID باکس که قراره باید باز بشه یکی هستند.
روش دوم مثل بیشتر پلاگین‌های جی کوئری استفاده از دهای ساده جی کوئری هست.

HTML:

<script type="text/javascript"> 
$(document).ready(function() {      $('#myButton').click(function(e) {           e.preventDefault();       $('#myModal').reveal();      }); }); </script>

پیش نمایش این افزونه و کلیه فایل‌های استفاده شده توی مثال‌های بالا رو می‌تونید از لینک‌های زیر ببینید

ساخت پنجره های Popup با جی کوئری

amininho

متخصص بخش کامپیوتر