رفتن به مطلب

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


پست های پیشنهاد شده

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


.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;
}

لینک به ارسال

باید قبلش یه کلاس اضافه کرد با 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/

لینک به ارسال

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

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

ویرایش شده توسط ahadto
لینک به ارسال

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


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

لینک به ارسال

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


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

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

لینک به ارسال

کد که درسته

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

http://jsfiddle.net/mg3uU/

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

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

لینک به ارسال

من 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 -->

لینک به ارسال

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

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

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

لینک به ارسال

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

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

http://feghahat.com

لینک به ارسال

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

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

لینک به ارسال

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

darkpage

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

http://feghahat.com

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

لینک به ارسال

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

یا قبل از </body>

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

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

لینک به ارسال

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

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

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;
}

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

لینک به ارسال

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

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

لینک به ارسال

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


#subscribepopup_overlay {
z-index: 0;
}

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

لینک به ارسال

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

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

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;
}

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

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

لینک به ارسال

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

لینک به ارسال

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

لینک به ارسال

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

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

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

لینک به ارسال

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...