打開模態窗口後隱藏html溢出

打開模態窗口後，可見2個滾動（html和模態）。我想隱藏html溢出，並在關閉模式窗口後可見。沒有js怎麼辦？只有通過CSS打開模態窗口後隱藏html溢出

$('.modal').on('show', function() { 
    $("html").css({ 
     overflow: 'hidden' 
    }); 
}); 

$('.modal').on('hide', function() { 
    $("html").css({ 
     overflow: 'scroll' 
    }); 
});

來源

2015-07-10 BabyGluk

我可以建議你使用代碼的標籤添加工作演示，[的jsfiddle（https://jsfiddle.net/）或[StackOverflow的內嵌代碼段（https://blog.stackexchange.com/ 2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）你寫的HTML/CSS代碼到目前爲止，以增加獲取anwser的機會。 –

你會如何知道模態是打開還是關閉？你在使用bootstrap模態或其他？ – Harsh

是的，我使用引導模式。我在描述中寫了函數。它的工作原理，但我不會這樣做的CSS – BabyGluk

爲引導的模式正確的事件觸發是'show.bs.modal'和'hide.bs.modal'

試試這個：

jQuery('.modal').on('show.bs.modal', function() { 
    jQuery("html").css({ 
     overflow: 'hidden' 
    }); 
}); 

jQuery('.modal').on('hide.bs.modal', function() { 
    jQuery("html").css({ 
     overflow: 'scroll' 
    }); 
});

但我強烈建議你使用引導的方法來顯示/隱藏一個模式。它自動處理HTML溢出。

jQuery("#element").modal('show'); 
jQuery("#element").modal('hide');

來源

2015-07-10 13:54:45 ghaschel

打開模態窗口後隱藏html溢出

回答

相關問題