我正在尝试关注许多网站中使用的标准灰色/弹出式显示的this简单教程。
具有讽刺意味的是,这在IE浏览器中看起来不错,但在Chrome中我无法获得我想要的外观。现在,包括弹出窗口在内的所有内容都是灰色的。我怎么能改变jquery / css所以除了fancybox弹出之外,屏幕上的所有东西都是灰色的?
小提琴:http://jsfiddle.net/Lc0q57nz/
的jQuery
$(document).ready(function () {
$('body').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()});
//Determine which links to show in navbar
window.onload = function() {
$.ajax({
type: 'GET',
url: '@Url.Action("CheckSecurity", "Home")',
dataType: 'json',
success: function(data) {
if (data == "viewer" || data == "NA") {
$('#Review').hide();
$('.Admin').hide();
} else if (data == "modifier") {
$('.Admin').hide();
}
}
});
};
var display = "<div id='fancycontainer' style='padding: 10px 10px 10px 10px'><h1 style='margin-bottom:20px;margin-top:0px;'>Monet has moved!</h1>" +
"<p>Click the link below if you are not redirected momentarily. To add the new page as a bookmark please click <a href='javascript:void(0)' onclick='BookmarkMe()'>here</a></p>" +
"<a href='http://insideshared.dev.com/Monet/'>Click here</a></div>";
$.fancybox(display, {
fitToView: false,
autoScale: true,
autoDimension: true,
closeClick: true,
openEffect: 'fade',
closeEffect: 'fade',
closeBtn: true,
openSpeed: 'fast',
closeSpeed: 'fast'
}).css({ 'display': 'block', 'z-index': '-1' });
});
function BookmarkMe() {
var bookmarkUrl = "http://insideshared.symetra.com/Monet/";
var bookmarkTitle = this.title;
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) { //For Chrome
alert('Chrome does not support this function. Please bookmark the page once redirected.');
return false;
} else if (window.sidebar) { // For Mozilla Firefox Bookmark
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, "");
} else if (window.external || document.all) { // For IE Favorite
window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
} else if (window.opera) { // For Opera Browsers
$("#bookmarkme").attr("href", bookmarkUrl);
$("#bookmarkme").attr("title", bookmarkTitle);
$("#bookmarkme").attr("rel", "sidebar");
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action. Please ');
return false;
}
return false;
}
HTML
<body>
@using Monet.Common
<div class="page">
@Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
@RenderBody()
</div>
</section>
</div>
<div id="footer">
<span style="color: Gray;"> </span>
</div>
</body>