gpt4 book ai didi

javascript - 使用 Bootstrap 将 jQuery 应用于正文(背景)但不应用于模态

转载 作者:行者123 更新时间:2023-11-28 09:06:25 25 4
gpt4 key购买 nike

我正在尝试将 foggy.js ( http://nbartlomiej.github.io/foggy/ ) 应用于 Bootstraps Modal 的背景。这将使我能够模糊我目前已完成的背景中的每个元素,但模态弹出窗口也是模糊的。所以我的问题是如何将模糊应用到背景及其子元素,以便模式不模糊,但其他一切都是。

这是我的代码。 注意我有一些代码可以启动和停止 Vimeo 以及启动和停止 Carousel。

$(document).ready(function(){
$('.close-video').on('click', function (event) {
for (var i = 0; i < window.frames.length; i++) {
window.frames[i].postMessage(JSON.stringify({ method: 'pause' }), '*') //Pauses Vimeo Video
$('#AVRS-Carousel').carousel('cycle'); //Starts Carousel
$('body').foggy(false); //Disables Foggy.js
}

});
$('[data-frame-index]').on('click', function (event) {
var $span = $(event.currentTarget),
index = $span.data('frame-index');

window.frames[index].postMessage(JSON.stringify({ method: 'play' }), '*') //Auto Plays Vimeo
$('#AVRS-Carousel').carousel('pause'); //Pauses Carousel
$('body').foggy(); //Applies Foggy.js

});
});

这里还有用于 Modal 的 Bootstraps back-drop 类的 CSS:

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
filter: blur(5px)
}

提前感谢您抽出时间。

最佳答案

我没有找到消除子元素模糊效果的方法。最后,我将模糊应用于导航和部分元素,并将模式保留在它们之外。 Bootstrap documentation for modals还警告标记放置,说:

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

所以 HTML 最终看起来像这样:

<body>
<nav>...</nav>
<div class="modal">...</div>
<section>...</section>
</body>

Javascript(在按钮上使用 bootstraps data-toggle 属性):

$('button[data-toggle]').on('click', function (event) {
$('nav, section').foggy();
});

我希望这对您有所帮助。

关于javascript - 使用 Bootstrap 将 jQuery 应用于正文(背景)但不应用于模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26679368/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com