弹出窗口上的简单关闭按钮

Question

我有一个弹出窗口需要有一个关闭按钮。 本主题处理相同的问题，但所描述的解决方案对我不起作用，可能是因为我没有 Elementor Pro，只有免费版本。

我网站上的弹出窗口有一个小关闭图标，在开发人员控制台中，该关闭图标具有“ue-simple-popup-close”类。我需要一个额外的关闭按钮。

有没有办法使用 CSS、javascript 或 HTML 来完成这项工作？例如，我可以将 HTML 小部件放入弹出窗口中并从那里开始工作。或者使用 ue-simple-popup-close 类告诉按钮执行与小 close X 相同的操作，但我不知道该怎么做。

期待您的答复并提前感谢您！

问候， MH1

它告诉我提供代码，所以这就是我得到的全部（它也在链接中）：

<script> 
  jQuery( document ).ready( function( $ ) {
  $( document ).on( 'click', '.close-popup', function( event ) {
      elementorProFrontend.modules.popup.closePopup( {}, event );
   } );
 } );
</script>

我看了很多关于这个问题的教程，但其中 4 个使用了与 IN HERE 中提供的完全相同的代码，还有一些是针对 elementor 的专业版。这样一分钟就解决了，但是这个乍一看很简单的话题其实很复杂。

Answer 1

我自己找到了解决方案。 这是我用来制作弹出窗口的内容：

1. 为弹出内容保存了元素或模板。在内容内创建一个常规按钮来关闭弹出窗口。
2. 为 elementor 使用插件“无限元素”，该插件启用“简单弹出”小部件，单击按钮即可触发弹出窗口。选择您在步骤 1 中创建的 elementor 弹出模板作为源。

现在我发现弹出窗口中的 X 关闭按钮属于哪个类： ue-简单弹出窗口关闭 问题的解决办法：给我自己的关闭按钮这个类，这样它就和X关闭按钮有相同的属性。问题是，它与常规 X 按钮一起卡在顶部。为您自己的关闭按钮添加一个附加类“close-button”。

然后使用这个简单的 CSS 代码将您自己的关闭按钮放回中间。 对于我的弹出窗口大小，这有效：

.close-button{
    padding-left:341px;
    padding-top:144px;
}

根据弹出窗口的宽度，您必须调整这些值。