我有一个模态对话框,您可以在此链接中看到:
https://codepen.io/rgraph/full/KKOyYYK
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.modaldialog.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.bar.js"></script>
<canvas id="cvs" width="700" height="300"></canvas>
<p>
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
tf ty fty fty f ty fty
... Add more text to force a
... scrollbar to appear
</p>
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [8,4,6,5,3,4,5],
options: {
}
}).draw();
bar.canvas.onclick = function (e)
{
ModalDialog.show('string:<div style="text-align: center"><h1>This is a dialog!</h1><br /><button style="font-size: 20pt" onclick="ModalDialog.close()">OK</button></div>');
};
</script>
现在,当您单击图表并显示对话框时,页面仍然可以滚动(取决于您的屏幕/浏览器大小)。
以前,我有一个 DIV,通过使用 iframe 显示页面来覆盖滚动条,然后包含 iframe 标记的页面显示对话框 - 然后覆盖 iframe 及其滚动条。
但是有没有一种方法可以在没有此 iframe 方法的情况下使用单个(或几个)CSS 属性禁用滚动?
当你的模态显示时,你可以使用以下JS:
const body=document.body.style.overflow="hidden"
然后您可以在关闭模式时将行为重置为默认“滚动”。