使用Elementor设计的WordPress网站，标题推送页面右侧弹出框答案

【问题标题】：WordPress site designed with Elementor, pop up box in header pushing page right使用Elementor设计的WordPress网站，标题推送页面右侧弹出框
【发布时间】：2018-09-02 04:39:27
【问题描述】：

我花了一整天的时间试图弄清楚如何解决这个问题，但我放弃了。任何帮助都感激不尽。这是有问题的站点的链接：dev.propadis.com

我正在使用页面构建器元素构建一个 WordPress 网站。我用插件 elementor header footer builder 创建了页眉。在标题上附加了一个带有弹出框的按钮。当我单击弹出框时，后面的整个页面向右移动，然后在关闭弹出框时返回。

知道为什么吗？

【问题讨论】：

标签： wordpress elementor

【解决方案1】：

当打开样式的弹出框：“padding-right:0”正在从 js 文件添加到您的正文中。

另外一个名为 modal-open 的类正在添加到您的主体类中。

我认为您应该在主题中添加以下 jQuery 代码：

jQuery('.modal-open').css('padding-right', 17 + 'px');

（您可以将它添加到主题头部的 ) 中）

【讨论】：

嗨@wsoil 感谢您的回复。我试过这个它不起作用。我通过插件将 jquery 添加到标题中。
如果你想在你的 css body.modal-open { left: -9px !important;位置：相对； }
是的，是的，这行得通！！！现在有一个小的向左移动，但我可以试验并输入正确的左 px 值。我想我理解了这个问题：当弹出框打开时，一个新的类 .modal 被添加到具有左 9px 值的主体中，我们通过这个 CSS 来否定，对吗？谢谢！
事实上它更复杂，我看到这段代码并没有 100% 纠正你的问题，但我认为现在看起来好多了......
是的，因为页眉、正文和页脚都在移动。一旦我把它粘住了，标题就停止了，你的 CSS 和页脚的正文我会在稍后处理它。

【解决方案2】：

到目前为止，对于 WordPress，此解决方案对我有用。我正在使用 PopBox 和 Elementor/Elementor-Pro。

注意：在常规浏览器标签中进行测试。一些开发者响应视图可能没有正常的滚动条。

在主题的style.css中，添加：

html.modal-open {
    /* All of this stops the page from scrolling in the background */
    -ms-overflow-style: scrollbar;
    overflow: hidden;
    height: 100%;
}

body.modal-open {

  /* This is the crucial rule to get rid of the page shift when opening a modal.*/
  /* Also, try 'auto' if you have issues ie mobile vs desktop. */
  overflow: hidden !important;

  /* You may want to explore toggling this, depending on your circumstances (page length and/or presence of page scroll bars) */
  height: 100%;
}

在主题的脚本中，添加：

jQuery(document).ready(function($) {

    /* The following adds/removes classes to <html> accordingly */

    $('#mypopup').on('show.bs.modal', function (e) {
        $('html').addClass('modal-open');
    })

    $('#mypopup').on('hide.bs.modal', function (e) {
        $('html').removeClass('modal-open');
    })

});

【讨论】：