將jQuery應用於body（背景），但不使用引導程序使用Modal

我正在嘗試將foggy.js（http://nbartlomiej.github.io/foggy/）應用於Bootstraps Modal的後端。這可以讓我模糊背景中到目前爲止完成的每個元素，但莫代爾彈出窗口也是模糊的。所以我的問題是我如何將模糊應用到背投及其子元素，以便模態不會模糊，但其他所有內容都是模糊的。將jQuery應用於body（背景），但不使用引導程序使用Modal

這是我的代碼。注意我有一些代碼來啓動和停止Vimeo以及啓動和停止傳送帶。

$(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 

}); 
});

另外這裏的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) 
}

感謝您的時間提前。

來源

2014-10-31 BHCOM

我發現沒有辦法從子元素中刪除模糊效果。最後，我將模糊應用到導航和節元素，並將模態保持在它們之外。白手起家documentation for modals還告誡標記的位置，他說：

總是嘗試把一個模式的HTML代碼中的頂級位置在文檔中避免影響模態的外觀和/或功能的其它組件。

所以HTML最終看起來是這樣的：

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

的Javascript（使用白手起家數據切換屬性上的按鈕）：

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

我希望這是有所幫助的。

來源

2014-10-31 20:59:01 mtl

嗨小車，這是有道理和好點。謝謝，我會試試看。 – BHCOM 2014-10-31 22:14:44

將jQuery應用於body（背景），但不使用引導程序使用Modal

回答

相關問題