使用Bootstrap将jQuery应用于正文（背景），而不是模态

Question

我正在尝试将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后台类的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)
}

谢谢您的宝贵时间。

Answer 1

我没有找到消除子元素模糊效果的方法。 最后，我将模糊应用于导航和剖面元素，并将模态保持在它们之外。 模态的 Bootstraps 文档还警告有关标记的放置，说：

始终尝试将模式的HTML代码放在文档的顶级位置，以避免其他组件影响模式的外观和/或功能。

因此，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();
});

我希望这会有所帮助。

使用Bootstrap将jQuery应用于正文（背景），而不是模态

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-31 20:59:01

使用Bootstrap将jQuery应用于正文（背景），而不是模态

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-31 20:59:01

解决方案1
0 已采纳 2014-10-31 20:59:01