Question

我正在Chrome中开发一个页面，我希望它在用户点击图片时显示模态但是当我尝试使用我的localhost时它什么也没做。我认为听众有问题。这是我的代码：

$(document).ready(function() {

  document.getElementByClass(".call-to-action").addEventListener("click", openModal());

});

function openModal() {
  $("html").addClass("modal-open");
}

我的CSS：

.modal-open
  .modal
    opacity: 1
    pointer-events: all

谢谢！

Answer 1

这可能对你有所帮助，欢呼！

如果您使用 Jquery ：

＆＃13;

$(document).ready(function() {

  $(".call-to-action").on("click", openModal);

});

function openModal() {
  $("html").addClass("modal-open");
}

＆＃13;

html.modal-open{
  
  background: #ddd;
  
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input class="call-to-action" type="button" value="CTA"/>
  </body>

＆＃13;

如果您使用 javascript ：

＆＃13;

document.getElementsByClassName("call-to-action")[0].addEventListener("click", openModal);



function openModal() {
  document.documentElement.classList.add("modal-open");
}

＆＃13;

html.modal-open {
  background: #ddd;
}

＆＃13;

<body>
  <input class="call-to-action" type="button" value="CTA" />
</body>

＆＃13;

如何使用JavaScript添加侦听器

1 个答案: