ahadto

غیر فعال شدن صفحه هنگام باز شدن پاپ آپ

20 پست در این موضوع قرار دارد

میشه توی این کد سی اس اس که مربوط به یک پنجره پاپ آپ هست یه تغییراتی داد که وقتی پنجره باز میشه بقیه صفحه یه رنگ خاکستری بگیره و غیر فعال بشه، مثل همین حالتی که وقتی که عکسهای پیوستی توی همین انجمن باز می کنیم


.subscribe {
border-radius: 10px 10px 10px 10px;
display: none;
position: fixed;
right: 40%;
top: 20%;
border: 11px solid #555555;
background: #fff;
z-index: 2;
direction: rtl;
z-index: 10000000;
}

0

به اشتراک گذاری این پست


لینک به پست

باید قبلش یه کلاس اضافه کرد با height و width کامل و یه z-index که بره زیر این پاپ آپ و بعد رنگ بهش بدی....

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

http://mihanlearn.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%be%d9%86%d8%ac%d8%b1%d9%87-%d9%87%d8%a7%db%8c-popup-%d8%a8%d8%a7-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c/

2

به اشتراک گذاری این پست


لینک به پست

نمی خواستم از جی کوئری استفاده کنم، (خود همین پنجره پاپ آپ با جی کوئری کار می کنه) فقط می خواستم یه استایل ساده باشه که پنجره یه ذره برجسته بشه تا قشنگ به چشم بیاد

میشه یه ذره بیشتر توضیح بدید که چجور میشه این کلاس جدید رو ساخت و به این شکل درش آورد؟

ویرایش شده در توسط ahadto
0

به اشتراک گذاری این پست


لینک به پست

یه کد ساده که باید به div class نسبت بدهید:


.darkpage {
width: 100%;
height: 100%;
display: block;
opacity: 0.8;
background: #000;
left: 0;
position: absolute;
top: 0;
}

2

به اشتراک گذاری این پست


لینک به پست

ببخشید من هرچی سعی کردم نتونستم این به کارش ببرم، می شه دقیقا بفرمائید که کجا باید قرار بگیره:


<div class="darkpage">
</div>

البته اگه همین رو هم اشتباه نکرده باشم :)

0

به اشتراک گذاری این پست


لینک به پست

کد که درسته

http://jsfiddle.net/HPBH7/1/

http://jsfiddle.net/mg3uU/

فقط شما با همون دستوری که subscribe رو نمایش میدهید.

darkpage را نمایش دهید

2

به اشتراک گذاری این پست


لینک به پست

من css رو گذاشتم استایل و کدی رو که قراره نمایش بدم به این صورت تغییر دادم اما کار نکرد و به یه جای دیگه سیاه شد:


<!-- #subscribe -->
<div class="darkpage">
<div class="subscribe">
<img id="close" src="http://feghahat.com/close.png" alt="close" title="بستن"/>
<p id="subscribe-sms"><img src="http://feghahat.com/sms2.png" alt="subscribe-sms" title="خبرنامه پیامکی"/></p>
<?php if(function_exists('wp_subscribes')) { wp_subscribes(); } ?>
</div>
</div>
<!-- #subscribe -->
<!-- #subscribe-sms-fixed -->
<div class="subscribe-sms-fixed" id="sms">
<img src="http://feghahat.com/sms.png" alt="subscribe-sms" title="خبرنامه پیامکی"/>
<p>اشتراک پیامک</p>
</div>
<!-- #subscribe-sms-fixed -->

0

به اشتراک گذاری این پست


لینک به پست

آخرین کد را تست کنید

display: none باشد به صورت پیشفرض

بعد از تگ body قرار دهید

0

به اشتراک گذاری این پست


لینک به پست

آخرین کد کدومه؟ ببخشید منظورتون رو متوجه نشدم

این هم آدرس آنلاین، ببیند قرار بود اون پنجره پاپ آپ پیامک اطرافش مشکی و غیر فعال بشه اما به جاش خود صفحه مشکی و غیر فعال شده

http://feghahat.com

0

به اشتراک گذاری این پست


لینک به پست

http://jsfiddle.net/HPBH7/1/

با کلیک برروی تصویر باید darkpage رو display css رو تغییر بدهید. همان کاری که واسه subscribe انجام میشه

0

به اشتراک گذاری این پست


لینک به پست

سی اس اسی رو که دادید توی استایل جایگزین کردم و این دفعه دیگه اصلا کار نمی کرد هیچی نشون داده نمی شد و وقتی که display: none; توی قسمت

darkpage

رو حذف می کردم باز مثل قبل میشد، یعنی اینجوری:

http://feghahat.com

ضمنا ببخشید من حرفاتون رو کامل متوجه نمی شم، میشه یه ذره مبتدی و در حد ما صحبت کنید :wub:

0

به اشتراک گذاری این پست


لینک به پست

کد رو بعد از تگ <body> قرار دهید

یا قبل از </body>

display هم طبق کد پیشفرض none هست. نمایش داده نمیشه

سپس کدی که واسه نمایش بکار میبرید رو باید ویرایش کنید و darkpage رو هم نمایش بدهید

3

به اشتراک گذاری این پست


لینک به پست

همونطور که قبلا گفتم فایل هدر که این کد رو توش به کار می برم اصلا قسمت بادی نداره

من وقتی کد اون پنجره پاپ آپ رو خالی و بدون این قسمت

darkpage

آخر فایل هدر می ذارم، با اینکه توی قسمت بادی نیست اما کار می کنه ولی وقتی به این شکل با اون تلفیق می کنم و می ذارم کار نمی کنه:


<!-- #subscribe -->
<div class="darkpage">
<div class="subscribe">
<img id="close" src="http://feghahat.com/close.png" alt="close" title="بستن"/>
<p id="subscribe-sms"><img src="http://feghahat.com/sms2.png" alt="subscribe-sms" title="خبرنامه پیامکی"/></p>
<?php if(function_exists('wp_subscribes')) { wp_subscribes(); } ?>
</div>
</div>
<!-- #subscribe -->
<!-- #subscribe-sms-fixed -->
<div class="subscribe-sms-fixed" id="sms">
<img src="http://feghahat.com/sms.png" alt="subscribe-sms" title="خبرنامه پیامکی"/>
<p>اشتراک پیامک</p>
</div>
<!-- #subscribe-sms-fixed -->

فک نکنم به خاطر نبودن در بادی مشکل داشته باشه (چون بدون اون حالت

darkpage

کار می کنه)

این هم فایل استایلش:


.darkpage {
width: 100%;
height: 100%;
display: none;
opacity: 0.8;
background: #000;
left: 0;
position: absolute;
top: 0;
z-index: 100;
}
.subscribe {
border-radius: 10px 10px 10px 10px;
display: none;
position: fixed;
right: 40%;
top: 20%;
border: 5px solid #03a2b0;
background: #fff;
direction: rtl;
z-index: 10000000;
}

من هرچی به این کلم فشار آوردم بیشتر از این نتونستم کاری بکنم

0

به اشتراک گذاری این پست


لینک به پست

الان روی سایتتون همه با هم هست؟

یک نکته اینکه سایت بدون بادی که نیست. باید داره وگرنه کلا سایت مشکل دار میشه.

2

به اشتراک گذاری این پست


لینک به پست

کلا پاپ آپ یه صفحه fixed درست میکنن برای حذفش کافیه این


#subscribepopup_overlay {
z-index: 0;
}

البته اگه مشکلتو درست متوجه شده باشم...

1

به اشتراک گذاری این پست


لینک به پست

همونطور که قبلا گفتم فایل هدر که این کد رو توش به کار می برم اصلا قسمت بادی نداره

من وقتی کد اون پنجره پاپ آپ رو خالی و بدون این قسمت

darkpage

آخر فایل هدر می ذارم، با اینکه توی قسمت بادی نیست اما کار می کنه ولی وقتی به این شکل با اون تلفیق می کنم و می ذارم کار نمی کنه:


<!-- #subscribe -->
<div class="darkpage">
<div class="subscribe">
<img id="close" src="http://feghahat.com/close.png" alt="close" title="بستن"/>
<p id="subscribe-sms"><img src="http://feghahat.com/sms2.png" alt="subscribe-sms" title="خبرنامه پیامکی"/></p>
<?php if(function_exists('wp_subscribes')) { wp_subscribes(); } ?>
</div>
</div>
<!-- #subscribe -->
<!-- #subscribe-sms-fixed -->
<div class="subscribe-sms-fixed" id="sms">
<img src="http://feghahat.com/sms.png" alt="subscribe-sms" title="خبرنامه پیامکی"/>
<p>اشتراک پیامک</p>
</div>
<!-- #subscribe-sms-fixed -->

فک نکنم به خاطر نبودن در بادی مشکل داشته باشه (چون بدون اون حالت

darkpage

کار می کنه)

این هم فایل استایلش:


.darkpage {
width: 100%;
height: 100%;
display: none;
opacity: 0.8;
background: #000;
left: 0;
position: absolute;
top: 0;
z-index: 100;
}
.subscribe {
border-radius: 10px 10px 10px 10px;
display: none;
position: fixed;
right: 40%;
top: 20%;
border: 5px solid #03a2b0;
background: #fff;
direction: rtl;
z-index: 10000000;
}

من هرچی به این کلم فشار آوردم بیشتر از این نتونستم کاری بکنم

الآن این تغییرات رو روی آدرس زیر اعمال کردم و می بینید که اصلا پاپ آپ دیگه باز نمی شه:

http://feghahat.com/

کد بادی هم توی فایل هدر نیست و نمی دونم اصلا کجا باید پیداش کنم، ولی همونطور که گفتم پاپ آپ بدون اینکه توی بادی هم قرار بگیره کار می کنه ولی وقتی این یکی استایل رو بهش اضافه می کنم خراب میشه

کلا پاپ آپ یه صفحه fixed درست میکنن برای حذفش کافیه این


#subscribepopup_overlay {
z-index: 0;
}

البته اگه مشکلتو درست متوجه شده باشم...

دوست عزیز من می خوام وقتی که پنجره پاپ آپ باز میشه بقیه صفحه غیر فعال بشه و یه رنگ دیگه بگیره، مثلا همین لایت باکسی که برای عکسها هست

0

به اشتراک گذاری این پست


لینک به پست

برای پاپآپ از lightbox چرا استفاده نمی کنید؟ یا fancybox

0

به اشتراک گذاری این پست


لینک به پست

من عکس نمی خوام باز کنم، می خوام این پنجره پاپ آپ که برای اشتراک پیامک پائین سمت چپ هست وقتی باز میشه مثل عکس که لایت باکس داره و زمینش مشکلی رنگ و غیر فعال میشه بشه، پنجره پاپ آپ رو با استفاده از کدی که آقای صوفی توی این تاپیک دادن درست کردم و الآن هم کدهای بالا رو گذاشتم دیگه اصلا کار نمی کنه، نمونه سالمش توی وب خود آقای صوفی هست

0

به اشتراک گذاری این پست


لینک به پست

اصلا چیزهایی که گفتم مختص عکس نیست.

شما میتونید با همون اسکریپت ها هر چیزی رو لود کنید.

کد شما هم سادست و میشه باهاش لود کرد.

1

به اشتراک گذاری این پست


لینک به پست

اگه اینقده دردسر داره که بیخیال شم فک کنم بهتره، می خواستم فقط یه تغییراتی توی استایل بدم که بصرفه به دردسرش، در هر صورت ممنون

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری