$target.blurOverlay 不是函数

Question

我想用欢迎文字覆盖我的 ASP.NET MVC 网站的主页。这种情况的一个很好的例子已经实现 here. Of course, I want to implement something like this sample by using a jQuery plugin called blur-overlay which could be downloaded from here.

我希望当用户点击欢迎文本以外的任何地方时，封面会永远淡出。

我正在使用 BundleConfig 来渲染我所有的 JavaScript 文件，如下所示：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/blur-overlay.js",
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery-ui-{version}.js",
                        "~/Scripts/lightbox-plus-jquery.min.js",
                        "~/Scripts/CustomNavbar.js"));

我也在使用 BundleConfig 渲染我的 CSS 文件。

以下是我的 _Layout.cshtml 页面的摘要：

<body>
    <div class="enterance">
        <p>
            Welcome text goes here.
        </p>
    </div>

    <div id="page">
        @* Here are lots of HTML tags which I would like to be covered by the welcome text when someone comes into the site *@
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <script>
        $(document).ready(function () {
                // Browsers that don't (fully) support filters
                var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
                var browserIsIE = /Trident\/\d+/.test(navigator.userAgent);
                var opacity = (browserIsEdge || browserIsIE) ? '0.75' : '0.5';

                // Grab the element you want to "wrap" with blur
                var $target = $('#page');

                // Grab the content you want to display in the overlay
                var $overlay = $('.enterance').detach().show();

                // Initialize the overlay
                $target.blurOverlay({
                    // Overlay content
                    content: $overlay,
                    // Background color of the overlay (use rgba for opacity)
                    backgroundColor: 'rgba(255, 255, 255, ' + opacity + ')',
                    // Blur amount (default 12px)
                    blurAmount: '10px',
                    // Duration of CSS transitions
                    transitionDuration: '500ms',
                    // Type of CSS transitions
                    transitionType: 'cubic-bezier(.22, .57, .27, .92)',
                    // Elements to "mask" (adds an extra overlay to improve visual contrast)
                    masks: [{
                        selector: '.mask-me', // Required
                        color: 'rgba(255, 255, 255, 0.5)',
                        opacity: 1,
                        width: '400px',
                        height: '300px'
                    }],
                    // Override the z-index used for the overlay and masks
                    zIndex: 3333,
                    // Disable the blur filter (for incompatible/buggy browsers or whatever reason)
                    noFilter: browserIsEdge || browserIsIE
                });

                // Show the overlay
                $target.blurOverlay('show').then(function () {
                    console.log('overlay is showing');
                });
        });
    </script>
</body>

我的问题是，当 JavaScript 代码到达 $target.blurOverlay({ 时，会出现以下错误：

$target.blurOverlay is not a function

我该如何解决这个问题。

Answer 1

我使用 jQuery.noConflict(); 解决了这个问题。我认为问题是我在 jQuery 旁边使用 Bootstrap，所以我不得不使用 jQuery.noConflict(); 来消除冲突。

$target.blurOverlay 不是函数

$target.blurOverlay is not a function

javascript

css

asp.net-mvc

jquery

jquery-plugins