如果另一个元素设置为显示，如何选择元素：flex；与JS

Question

我有一个全屏固定弹出窗口，可以在显示：无；之间切换。并显示：flex；。当我的弹出窗口设置为显示时，我希望能够选择正文标签：flex; 以禁用弹出窗口后面的滚动。

因此，类似于“如果 popup = display: flex; then body = Overflow: hide;”

我怎样才能用一点 JS 或 Jquery 来做到这一点？或者如果有更好的方法，我愿意接受建议。

这是我用来打开弹出窗口的代码：

JS：

<script type="text/javascript">

    <!--

        function toggle_visibility(id) {

            event.preventDefault();

           var e = document.getElementById(id);

           if(e.style.display == 'flex')

              e.style.display = 'none';

           else

              e.style.display = 'flex';

        }

    //-->

    </script>

HTML：

<a href="#" onclick="toggle_visibility('id-of-popup');">Clickable item to open the Popup</a>

Answer 1

我会更改您的代码以使用类。添加包含以下内容的样式表：.popup { display: none; }.popup.show { display: flex; }.popup-shown { overflow: hidden; }然后改变你的 JavaScript 以利用这些：function toggle_visibility(id) {    event.preventDefault();    var e = document.getElementById(id);    e.classList.toggle('show');    document.body.classList.toggle('popup-shown');}我假设你的弹出窗口在这里得到“popup”类。这利用了classList现代浏览器上可用的界面，特别是不包括 Internet Explorer。

Answer 2

因此，首先，您需要使用 querySelecor 获取弹出元素。假设弹出窗口有一个 id，您将执行以下操作：var&nbsp;element&nbsp;=&nbsp;document.getElementById(popup_id_here);然后。您可以获得元素的计算样式。使用这个：var&nbsp;style&nbsp;=&nbsp;getComputedStyle(element);现在，您可以检查显示器是否为柔性的：if(style.display&nbsp;==&nbsp;"flex")&nbsp;......将样式应用到身体上document.body.style.overflow&nbsp;=&nbsp;"hidden";