ورود

View Full Version : كم رنگ كردن پشت زمينه PopUp طراحي شده



MAHDIACTION
دوشنبه 27 تیر 1390, 17:40 عصر
سلام دوستان

يه فرم با Jquery طراحي كردم كه مي خوام وقتي باز مي شه پشت زمينشو مشكي كمرنگ كنم به تعبييري Opacity پشت زمينه رو كم رنگ كنم.
اين كار رو با متد Css المنت ها انجام مي دم ولي ظاهرا Opacity رو بعضي از مرورگر ها پشتيباني ميكنند و بعضي ها هم نه....

alismith
پنج شنبه 30 تیر 1390, 04:10 صبح
سلام
فقط IE مشکل داره که باید اینگونه عمل کنید :


filter: alpha(opacity=80);



موفق باشید

MAHDIACTION
پنج شنبه 30 تیر 1390, 18:21 عصر
ممنون از لطف شما
براي دوستاني كه بعد ها براي ياد گيري به اين تايپيك مي‌ آيند بگم كه مي تونند اين كار رو با كد پايين انجام بدن.
اين Style رو داخل تگ Head مي نويسند


<style>
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
</style>

اين تابع رو هم داخل Jquery فراخواني مي كنند
البته منظور از
arrPageSizes آرايه اي هست كه طول و عرض صفحه نمايش رو داخلش قرار مي دم.


function ShowBackGround(){
var arrPageSizes = ___getPageSize();
$('#jquery-overlay').css({
backgroundColor: '#000',
opacity: 0.7,
width: arrPageSizes[0],
height: arrPageSizes[1}).fadeIn();
}

تابع بدست آوردن طول و عرض مرورگر:


function ___getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} elseif (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} elseif (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} elseif (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeigh t);
return arrayPageSize;
};