Я хочу покрыть главную страницу моего сайта ASP.NET MVC приветственным текстом.Отличный пример этого сценария уже реализован здесь .Конечно, я хочу реализовать что-то вроде этого примера, используя плагин jQuery с именем blur-overlay, который можно загрузить с здесь .
Я хочу, когда пользователь нажимает в любом месте из приветствиятекст, затем обложка исчезает навсегда.
Я использую 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 не является функцией
Как решить эту проблему.