با استفاده از این جی کوئری می توانید یک لایت باکس متنی یا پاپ اپ متنی با افکت های جذاب ایجاد کنید .
آموزش استفاده
- فراخوانی css و js
<link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="popup.js"></script>
- کدهای htmlو تبدیل <body> به <body onload=”openOffersDialog();”>
<div id="wrapper"> <div id="overlay" class="overlay"></div> <a onclick="openOffersDialog();">برای مشاهده پاپ آپ کلیک کنید</a> <div id="boxpopup" class="box"> <a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a> <div id="content"> دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است .وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت میکند .فعالیت سایت به دو دسته تقسیم میشود :معرفی و دانلود جدید ترین example (مثال و سورس های آماده) جی کوئری همراه با دمو و آموزش و سورس .مستندات آموزشیبرای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته ایم که این خود باعث سهولت برای طراحان وب شده است .۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد . <a href="http://www.ijquery.ir/" title="ijquery - Free Jquery plugins,Javascript,CSS,html">www.ijquery.ir </a> </div> </div> </div>
سلام
میشه یک کدی بدین که این لایت باکس وقتی وارد سایت شدی خودش لایت باکس بیاد نه اینکه تو صفحه کلیک کنیم بعد لایت باکس بیاد .
ممنون میشم اگه این کد رو بدین .
باید popup.js رو ویرایش کنید و در تابع openOffersDialog از document.ready استفاده کنید .
براتون ویرایش کردم میتونید از لینک زیر دانلود کنید و جایگزین کنید .
http://www.ijquery.ir/wp-content/uploads/2013/06/popup.zip
سلام بر دوست عزيز
مي خواستم تشكر فراواني بايت راه اندازي اين وب سايت خوب داشته باشم
ممنون
مرسی امیر عزیز
سلام .از سایت بسیار خوبتون تشکر میکنم.من از jqyery هیچی نمیدونستم ولی با بررسی این کدها مطالب زیادی یاد گرفتم و واقعا بهتون خسته نباشید میگم . تشکد
سلام عسل خانم بسیار تبریک میگم . مرسی از نظرتون
با سلام
از این لایت باکس چجوری میشه تو جوملا استفاده کرد.
مثلا میخوام واسه هر مطلبی که میذارم وقتی کاربر روی عکس مورد نظر کلیک کرد این لایت باکس باز بشه و توش توضیحات و لینک دانلود باشه.
تشکر
سلام ,
حامد جان در انجمن جوملا مطرح کنید یا این لایت باکس رو به صورت کامپونت باید استفاده کنید یا تو خود قالب ویرایش کنید
با سلام
این جیکوئری به این صورت هست که با باز شدن صفحه نمایش داده میشه، و در صورت کلیک بر روی متن برای بار دوم پنجره پاپ آپ به نمایش در میاد.
چطوری میشه تغییری در اون ایجاد کرد که با باز شدن صفحه این پاپ آپ باز نشه و فقط فقط فقط در صورت کلیک روی متن باز شه؟
محمد جان باید popup.js رو ویرایش کنید و در تابع openOffersDialog از document.ready استفاده کنید .
براتون ویرایش کردم میتونید از لینک زیر دانلود کنید و جایگزین کنید .
http://www.ijquery.ir/wp-content/uploads/2013/06/popup.zip
ممنونم از جوابت مهدی جان
در ویندوز که صفحه ارو اجرا می کنم همچنان با باز شدن صفجه لایت باکس باز میشه
من فقط فقط در صورت کلیک بر روی متن باز شه
یعنی با کدی که خدمتت گفتم باز با باز شدن صفحه باز میشه ؟ من این رو امتحان کردم اوکیه
سلام داداش واقعا ممنون
راست میگه دوستمون منم آدرسی که دادی جایگزین کردم popup
ولی فایده نداشت خودش خودکار باز میشه
گه میشه یه کد دیگه بدین خواهششششششششششش
لازم دارم 🙂
بالاخره جواب نگرفت این پست؟
سلام عذر خواهی این کامنت از دستم در رفته بود .
شما تگ body رو باید onload رو برداری بعد به کلاس overlay یک display:none; بدی .
برای اینکه کارتون هم راحت شه براتون درست کردم از این لینک میتونید دانلود کنید .
http://www.ijquery.ir/wp-content/uploads/2013/08/fa.zip
با سلام
من سایتم در قسمت وبسایت درج شده
برای قسمت ارسال پیامک اگر نگاه کنید یه فایل لود میشه با حجم 425 کیلوبایت http://lo3.ir/templates/Lo3.IR/jss/jquery-ui.js
که سایت رو خیلی سنگین می کنه
این قسمت ارسال پیامک به صورت کشویی باز میشه و با زدن دکمه close بسته میشه
ممنون میشم راهنمایی کنید و راه حلی رو پیشنهاد بدید که حجم سایت من کم شه. همون طور که می دونید 400 کیلوبایت حجم کسی نیست.
مرسی
آقا دستت درد نکنه کار کرد…….
فقط یه سوال من میخوام بزارم توی ایندکس تراوینم برای همین وقتی کدهارو میزارم متاسفانه بک گراندش تغییر میکنه …
اگه میشه زحمت این رو هم بکش که بک گراند نداشته باشه و بتونم توی سایتم استفاده کنم…….
آخه من جاوا اسکریپت بلد نیستم!!!! 🙂
ممنون میشم….ف
قط مثل اون نظره ازدستت نره هااااااااااااااااا خخخخخخخ
سلام مهدی جان لطفاً لینک بده چک کنم
داداش بیا این به دردت میخوره؟؟؟ فایل جاوا اسکریپت سایتمه!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
http://gigpars.com/upload/ofnh_crypt.js
مهدی جان منظورم صفحه ای که داری این لایت باکس رو تست میکنی رو لینک بدی
کامنت من و ندیدی مدیر عزیز 😀
محمد جان شما میتونید کدهای http://lo3.ir/templates/Lo3.IR/jss/jquery-ui.js رو فشرده کنید تا کم حجم شه یعنی تمام کد ها کنار هم نوشته بشه
سلام.من از این کد استفاده کردم.اما لایت باکس دایما بازه و با کلید close هم بسته نمیشه و زمانی که ری مشاهده پاپ آپ کلیک کنید آنوقت صفحه کمی تاریک و گویی پاپ آپ دیگری باز میشود که کلید بستن نیز عمل میکند.اما بعد از بستن دوباره باز میشود.تصویر زمینه هم تغییر کرده است.
سلام احسان جان شما کدوم لینک رو استفاده کردی برای دانلود ؟
سلام اقا مهدي و تشكر از اموزش خوبتون
ايا ميشه افكتهاي كه لايت باكس تو جي كوئري رو تغير داد و اگر ميشه چه افكتهايي داره لطفا توضيح بدهيد
سلام رضا جان کلاً این لایت باکس از متد .animate جی کوئری استفاده میکنه برای تغییرش میتونی پارامترها رو تغییر بدی
سلام…
به تازگی با سایتتون آشنا شدم و خیلی پر محتوا و عالی هستش…
من از این لایت باکس برای خبرنامه سایت استفاده کردم که با وردپرس راه اندازی شده، میخوام گزینه ای به فهرست اصلی سایت اضافه کنم تا این باکس رو نشون بده ولی نمیدونم باید از چه تگی در قسمت آدرس فهرست استفاده کنم.
ممنونم میشم اگر کمکم کنید…
سپاس…
سلام حمید جان یعنی میخوای یک منو از فهرست ها اضافه کنی که روش کلیک شد لایت باکسی باز شه ؟
اون فایلی که گذاشتید واسه دانلود ، میشه یخورده بیشتر در موردش توضیح بدید ؟ ممنون از سایت خوبتون
سلام من یک فرم ثبت نام در صفحه اصلی قرار دادم میخوام وقتی روش کلیک میکنم،فرم به صورت لایت باکس یا همون پاپ آپ باز شه ولی نمیدونم چه جوری؟
کمکم کنید
خواهش میکنم
ممنون
سلام zohre خانم شما روی کدوم قسمت فرم میخوای کلیک کنی و یک لایت باکس باز شه ؟
چون اگه فرم رو submit کنی که باید یک سری اطلاعات سمت سرور ارسال بشه با ! دقیق تر بگید یا اگر نسخه آنلاین داری چک کنم
سلام
شمارا به خدا قسم تان میدهم کمکم کنید،من از کد پاپ آپ شما استفاده کردم ولی من به دنبال پاپ آپی هستم که پشت آن صفحه اصلی من باشد که در صورت انصراف کاربر ،کاربر در صفحه اصلی بتواند باقی گزینه ها را استفاده کند.
ممنون از شما
لطفا اگه میشه کدشو واسم ارسال کنید ممنون
اوکی من اگر منظور شما رو درست متوجه شده باشم شما میخوای یک لینک با نام ثبت نام روی صفحه اصلی سایت باشه وقتی روش کلیک شد فرم ثبت نام رو در لایت باکس نشون بده ؟!
برای این کار اول این سورس رو دانلود http://www.ijquery.ir/wp-content/uploads/2013/08/fa.zip
بعد هم سند html رو با یک نوت پد باز و فرم ثبت نام رو که نوشتی رو داخل div content بزار
سایت خوبیه خسته نباشید
انشاله با همین قدرت ادامه بدین
سلام.
آقا مهدی بابت کدتون ممنون.
فقط یک مشکل در هنگام استفادش در قالب وبلاگم دارم، و اون اینه که چون قبلا در قالب وبلاگ از کد جی کوئری استفاده کردم و این کد شما هم جی کوئری هست، استفاده همزمان از دو کد جی کوئری وجود نداره و تداخل می کنه و قالب به درستی اجرا نمیشه.
پیشنهادتون واسه حل این مسکل چیه؟
و بعد نمیشه این کد رو بدون جی کوئری بزارید؟
مرسی
سلام
ممنون از کد خوبتون
میشه این کد رو برام جوری قرار بدید که مثلا اگر یک فقط یک بار برای هر کاربری نشون داده بشه ؟ یعنی توی کوکی ذخیره بشه من از طریق زیر استفاده کردم ولی درست جواب نداد میشه شما کاملش کنید مرسی
var face = document.cookie;
function setCookie(name, value) {
if (value != null && value !=””)
document.cookie=name + “=” + escape(value) + “;”;
face = document.cookie;}
function getCookie(name) {
var facel = face.indexOf(name + “=”);
if(facel == -1) return null;
facel = face.indexOf(“=”, facel) + 1;
var finstr = face.indexOf(“;”, facel);
if (finstr == -1) finstr = face.length;
return unescape(face.substring(facel, finstr));}
if(!yltemp==1) {
setCookie(“popyal”,1);
اقا میشه بگین چطور باید از این کد و در کجای یه قالب باید ازش استفاده کرد مثلا من میخوام ویدئو های سایتم با لایت باکس و پاپ اپ باز بشه اصلا پلاگین ساده ای است که بشه ازش استفاده کرد و یا این کد رو چطور میشه استفاده کرد
سلام
چطوری میشه چنتا پاپ آپ رو توی یه یک صفجه گذاشت؟
ممکنه تو هر مطلب من یک پاپ آپ باشه و تو یک صفحه چندین مطلب وجود داره.
برای استفاده از چنتا پاپ من از این کد استفاده کردم و جواب داد.فقط مشکلش اینه که پا دیگه بسته نمیشه.
function openOffersDialog(event) {
debugger;
var $overlay = $(event.target).parents(“li”).find(“.overlay”);
$overlay.fadeIn(‘fast’, function() {
var $dialog = $(event.target).parents(“li”).find(“.boxpopup”);
$dialog.css(‘display’,’block’);
$dialog.animate({‘fadeIn’:’30%’},500);
});
}
function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$(‘#’ + prospectElementID).css(‘position’,’absolute’);
$(‘#’ + prospectElementID).animate({‘left’:’-100%’}, 500, function() {
$(‘#’ + prospectElementID).css(‘position’,’fixed’);
$(‘#’ + prospectElementID).css(‘left’,’100%’);
$(‘#overlay’).fadeOut(‘fast’);
});
});
});
}
سلام
ممنون جالب بود ولی وقتی تو یه مطلب میخوام چند تا از این لایتباکسها استفاده کنم زمان نمایش همشون رو با هم و روی هم نشون میده . چیکار کنم که درست شه ؟
سلام
خواهش میکنم جواب منو بدهید ، واجب لازم دارم …
ممنون.
سلام ادمین عزیز. یک سوال داشتم و اینکه منو راهنمایی کنید ممنون میشم.
میشه کد جاوا اسکریپت یا اچ تی ام ال برای خبرنامه سایتم بدید ؟
خبرنامه من از فیدبرنر هستش و کدش رو دارم ولی میخوام که بصورت پاپ باکس هر موقع کاربری وارد سایت شد اتوماتیک نمایش داده بشه و قابلیت بستن پنجره و همچنین امکان گزینه عدم نمایش پنجره برای دفعات بعدی هم فراهم باشه … فقط کدش رو اگه لطف کنید برام بفرستید مراحل جای گذاری کد فیدبرنر و عکس و… رو خودم اوکی میکنم.
ممنون از شما.
مرسی
با تشکر از مطلب کاربردی شما
سلام خسته نباشید .
من یک وب سایت دارم طراحی میکنم به یک مشکل برخوردم
من یک لایت باکس دارم . میخوام هر محصول لایت باکس خودش را داشته باشه !
ولی اینطور نیست همه محصول ها یک لایت باکس دارن .
چیکارش کنم ؟
ادرس وب سایت : http://takhfifvizheh.ir/
وقتی وارد میشوید قسمت پایین نمونه محصولا
(مشخصات محصول)
سلام.ممنون از این فایل ساده و کم حجم.میشه بجای کلیک روی دکمه ضربدر کاری کنید که روی هر جای زمینه تیره کلیک کنید بسته بشه؟
سلام و خسته نباشید
چگونه میشه به فایل جاوا کوکی اضافه کرد که هر چند دقیقه یک بار برای یک آی پی باز یشه ؟