除了fancybox弹出窗外,灰显了一切

时间:2014-11-21 19:19:31

标签: javascript jquery html css

我正在尝试关注许多网站中使用的标准灰色/弹出式显示的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>

0 个答案:

没有答案