ninja4unیه روشی ، یه افزونه ای یا یه کدی میخواستم که با کلیلک روی یه گزینه مشخص شده یک صفحه پاپ آپ باز بشه . . .
هرچی تلاش کردم نتونستم ، ممنون میشم یه کمکی بکنید.
شبیه این شکل زیر منظورمه . . .
http://arange.ir/wp-content/uploads/2013/03/Untitled.jpg
-
-
درود بر شما .
بفرمایید اینم آموزش ایجاد چنین پنجره ای :
------------------------------------------
کد زیر رو در مکانی که میخواهید قرار دهید و سپس ویرایش های لازم رو انجام دهید :
<a href="#" class="lightbox">نمایش متن</a> <div class="backdrop"></div> <div class="box"> <a href="#" class="close"><img src="http://s3.picofile.com/file/7690332361/close_pop.png" class="btn_close" title="پنجره را ببند" alt="Close" /></a> متن خود را بنویسید</div>1. به جای "نمایش متن" کلمه ای قرار دهید که میخواهید هنگامی که روی آن کلیک شد پنجره ی پاپ آپ باز شود .
2. در قسمت "متن خود را بنویسید" هم که باید متن داخل پاپ آپ رو بنویسید .
3.* در قسمتی که متن پنجره رو مینویسید میتونید از کد html ( تصویر و لینک و ... ) هم استفاده کنید .
4.* در قسمت "نمایش متن" شما میتونید به جای لینک و عنوان ، یک تصویر قرار بدین . فقط کافیه یک کد تصویر رو قبل از
<a href="#" class="lightbox">نمایش متن</a>
قرار دهید .پس از انجام مرحله قبل، نوبت به زیبا سازی میرسه، پس به شیوه نامه (style.css) قالبتون برید و کد زیر در آخر کدهای موجود در اونجا قرار بدید.
.backdrop { position:absolute; top:0px; left:0px; width:100%; height:100%; background:#000; opacity: .0; filter:alpha(opacity=0); z-index:50; display:none; } .box { position:absolute; top:20%; left:30%; width:500px; height:300px; background:#ffffff; z-index:51; padding:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444; display:none; } .close { float:right; margin-right:2px; cursor:pointer; }خوبه، حالا نوبت به آخرین مرحله میرسه، یعنی استفاده از کدهای جی کوئری.
همونطور که میدونید ابتدا باید کتابخونه جی کوئری رو در قالبمون فراخوانی کنیم.
پس کد زیر رو بین دو تگ head در سربرگ (header.php) قرار بدید.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>و بعد از اون هم، قطعه کد جی کوئری زیر رو که شامل کلاس های کدهای خطوط اولمونه رو در همون قسمتی که فراخوانی کتابخونه جی کوئری رو انجام دادید، قرار بدید.
البته اگه خواستید از ازدحام کدها در سربرگ جلوگیری کنید، راه بهتری هم وجود داره و اونم اینه که کد زیر رو با فرمت js در قالبتون ذخیره و سپس در سربرگ فراخوانیش کنید.<script type="text/javascript"> $(document).ready(function(){ $('.lightbox').click(function(){ $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); $('.box').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.close').click(function(){ close_box(); }); $('.backdrop').click(function(){ close_box(); }); }); function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); }); } </script>** کوکی های سایت و مرورگر رو پاک کنید و با Ctrl + F5 رفرش کنید سایتتون رو و تغییرات رو ببینید **
سوالی بود در خدمتیم :)
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
ninja4un -
ببخشید یادم رفت یک افزونه رو هم معرفی کنم .
افزونه ی زیر رو هم چک کنید اگر کدهای بالا جواب نداد . از این افزونه استفاده کنید :
http://wordpress.org/extend/plugins/simple-popup-manager/اما سعی کنید کدها رو سازگار کنید و استفاده کنید . همیشه استفاده از کد بهتر از افزونه هست .
موفق باشید
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
ninja4un -
IMDe گفت:
ببخشید یادم رفت یک افزونه رو هم معرفی کنم .افزونه ی زیر رو هم چک کنید اگر کدهای بالا جواب نداد . از این افزونه استفاده کنید :
http://wordpress.org/extend/plugins/simple-popup-manager/اما سعی کنید کدها رو سازگار کنید و استفاده کنید . همیشه استفاده از کد بهتر از افزونه هست .
موفق باشید
سلام و تشکر از بابت راهنمایی
ولی این کدها درست کار نمیکنن ، یکی دوجا تست کردم . . .
-
کدها کار میکنند . بنده خودم هم در سایتم برای مدتی قرار داده بودم .
احتمالا مراحل رو درست انجام ندادین .
همچنین افزونه رو که گفتم تست کنید .
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
ninja4un -
IMDe گفت:
کدها کار میکنند . بنده خودم هم در سایتم برای مدتی قرار داده بودم .احتمالا مراحل رو درست انجام ندادین .
همچنین افزونه رو که گفتم تست کنید .
والله شما هرچی گفتی مو به مو انجام دادم ، نشد اما
افزونه هم طوری هست که زمان بهش میدی و طبق اون زمان نمایش داده میشه ، ولی من میخوام یه گزینه ای قرار بدم که بعد کلیک روی اون بیاد !
-
پس باید صبر کنید تا پاسخ دیگر کاربران رو بگیریم . :)
از جمله برخی از افراد که مدعی پاسخ گویی به کاربران هستند ! در همین حد توان من بود . دیگه باید به بزرگی خودتون ببخشید :)
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
ninja4un -
IMDe گفت:
پس باید صبر کنید تا پاسخ دیگر کاربران رو بگیریم . :)از جمله برخی از افراد که مدعی پاسخ گویی به کاربران هستند ! در همین حد توان من بود . دیگه باید به بزرگی خودتون ببخشید :)
من بازم تشکر میکنم از راهنمایتون ، خیلی لطف کردید
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
ایران وردپرس
ایران وردپرسدربارهی این موضوع
- خوراک RSS برای این موضوع
- آغاز شده ۱۱ سال پیش توسط ninja4un
- آخرین پاسخ توسط ninja4un
- این موضوع
حل‌نشده
