单击添加到购物车以触发弹出窗口答案

【问题标题】：Clicking Add-to-Cart to trigger popup单击添加到购物车以触发弹出窗口
【发布时间】：2020-06-08 09:46:05
【问题描述】：

我试图仅在使用 jQuery/javascript 单击 .add-to-cart 按钮时显示弹出窗口。

假设我的弹出窗口是“#popup”，触发弹出窗口的按钮是“.add-to-cart”，我该怎么做？我对javascript相当陌生，但是当用户滚动200px时，我设法更改了div的颜色和背景，我尝试使用相同的方法通过单击来更改属性，但没有任何运气。这里的想法是将弹出窗口的属性从“display：none”更改为“display：block”，以便在我的问题中使用它。此外，在弹出窗口内有一个按钮，单击该按钮会再次关闭该弹出窗口，我们将其称为“.continue”

这是正确的方法，还是有其他方法可以显示/关闭此弹出窗口？

我会发布我的代码，但这对解决这个问题没有多大帮助，因为我相信这对于这里的专家来说很简单。但这是我用于我提到的其他功能的 javascript，它基于滚动更改属性。我怀疑我也可以修改它以在这种情况下使用？

var mybutton = document.getElementById("backBtn");
var mytext = document.getElementById("tilbakeP");
var myarrow = document.getElementById("arrow");
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        mybutton.style.position = "fixed";
        mybutton.style.top = "20px";
        mybutton.style.backgroundColor = "rgba(0,0,0,0.4)";
        mytext.style.color = "#fff";
        myarrow.style.borderColor = "#fff";
    } else {
        mybutton.style.position = "absolute";
        mybutton.style.top = "";
        mybutton.style.backgroundColor = "#fff";
        mytext.style.color = "#333";
        myarrow.style.borderColor = "#333";
    }
}

【问题讨论】：

你用 JavaScript 做了什么尝试？
@Soban 嘿，我添加了到目前为止我尝试过的代码，虽然我已经删除了我尝试过的内容，但它看起来像那样（但是类和 ID 来自另一个弹出窗口，当我试过了，我改变了那些）。有什么想法吗？

标签： javascript html jquery css function

【解决方案1】：

我想通了，如果有人遇到这个问题，这可以通过在 css 中将弹出窗口设置为“display:none”，并使用此代码使其显示，通过按添加到购物车 CTA：

$('.button.el-button.cta.normal-btn.add-to-basket').click(function(){ 
  $('.installation-popup').show();
});

【讨论】：