用Elementor设计的WordPress网站,在页眉右侧弹出框

时间:2018-03-23 13:26:32

标签: wordpress elementor

我花了整整一天试图弄清楚如何解决这个问题而且我放弃了。任何帮助都感激不尽。以下是包含问题的网站的链接:dev.propadis.com

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

知道为什么吗?

2 个答案:

答案 0 :(得分:0)

当弹出框打开样式时:" padding-right:0"从js文件添加到您的身体。

此外,名为modal-open的类正在添加到您的身体类中。

我认为你应该在你的主题中添加以下jQuery代码:

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

(你可以把它添加到主题的头部)

答案 1 :(得分:0)

到目前为止,对于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');
    })

});