使用 Elementor 设计的 WordPress 网站,在 header 中弹出框向右推页面
WordPress site designed with Elementor, pop up box in header pushing page right
我花了一整天的时间试图弄清楚如何解决这个问题,但我放弃了。任何帮助都感激不尽。这是有问题的站点的link:dev.propadis.com
我正在使用页面生成器元素构建一个 WordPress 站点。我用插件 elementor header footer builder 创建了 header。在 header 上附加了一个带有弹出框的按钮。当我点击弹出框时,后面的整个页面向右移动,然后在关闭弹出框时向后移动。
知道为什么吗?
当弹出框打开样式时:"padding-right:0" 正在从 js 文件添加到您的 body。
另外一个名为 modal-open 的 class 正在添加到您的 body classes。
我认为您应该在主题中添加以下 jQuery 代码:
jQuery('.modal-open').css('padding-right', 17 + 'px');
(您可以将其添加到主题头部的 ) 中)
到目前为止,对于 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');
})
});
我花了一整天的时间试图弄清楚如何解决这个问题,但我放弃了。任何帮助都感激不尽。这是有问题的站点的link:dev.propadis.com
我正在使用页面生成器元素构建一个 WordPress 站点。我用插件 elementor header footer builder 创建了 header。在 header 上附加了一个带有弹出框的按钮。当我点击弹出框时,后面的整个页面向右移动,然后在关闭弹出框时向后移动。
知道为什么吗?
当弹出框打开样式时:"padding-right:0" 正在从 js 文件添加到您的 body。
另外一个名为 modal-open 的 class 正在添加到您的 body classes。
我认为您应该在主题中添加以下 jQuery 代码:
jQuery('.modal-open').css('padding-right', 17 + 'px');
(您可以将其添加到主题头部的 ) 中)
到目前为止,对于 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');
})
});