如何使用按钮 launch/trigger 我的注册表单 pop-up 或 text-link？

Question

我正在使用 Shopify 插件 (Form Builder) 创建 sign-up 表单 pop-up。

表单设置为在按下浮动按钮时触发，它应该正常工作（这是 out-of-the-box 行为）。

我想要 borrow/hijack 浮动按钮能够通过按下我自己指定的按钮或 text-link 来启动 pop-up。

通过将此 DIV 添加到给定页面来调用浮动按钮和 pop-up:

<div class="globo-formbuilder" data-id="NzY5ODg="></div>

浮动按钮的代码如下：

<div class="floating-button  bottom right" onclick="Globo.FormBuilder.showFloatingForm(this)">
  <div class="fabLabel">NOTIFY ME</div>
</div>

如果我将相同的 onclick 添加到我自己的按钮或 links，什么也不会发生。

包含的完整代码如下所示（我稍微清理了代码，删除了实际表单和样式的 HTML）：

<head>
<script type="text/javascript" async="" src="https://cdn.shopify.com/s/files/1/0278/4342/8452/t/11/assets/globo.formbuilder.init.js?v=1649282057&amp;shop=roux-dk.myshopify.com"></script>
</head>
<body>

<div class="globo-formbuilder" data-id="76988" id="globo-formbuilder-76988">
<div class="globo-form float-form globo-form-id-76988">

<div class="globo-form-app float-layout">
    <div class="header dismiss " onclick=" Globo.FormBuilder.hideFloatingForm(this)">
        <svg viewBox="0 0 20 20" class="" focusable="false" aria-hidden="true"><path d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path></svg>
    </div>

    <form class="g-container" novalidate="" action="https://form.globosoftware.net/api/front/form/76988/send" method="POST" enctype="multipart/form-data" data-id="76988">
        
[ form HTML goes here, omitted ]       
    
</form>
</div>

<div class="floating-button  bottom right" onclick="Globo.FormBuilder.showFloatingForm(this)">
    <div class="fabLabel">
        NOTIFY ME
    </div>
</div>

<div class="overlay" onclick="Globo.FormBuilder.hideFloatingForm(this)"></div>

</div>
</div>

</body>

我似乎无法弄清楚如何让我自己的按钮启动 pop-up 表单。

我在这里设置了一个测试页面：https://rouxposter.com

更新：我找到了解决方案，见下文。通过单击精选 Collection 部分中的“发布特定信件时获得通知”按钮，可以在我的商店的主页上看到实现。我已经把link移到测试页了

欢迎提出任何建议！

Answer 1

按钮正在传递 (this)，在按钮的情况下，它是一个按钮，并且该按钮具有 .form，这是它所在的表单。表单构建器使用该表单。

在div的情况下this是div.

为什么不直接将 svg 放在按钮中？

<button onclick="Globo.FormBuilder.hideFloatingForm(this)">
    <svg viewBox="0 0 20 20" class="" focusable="false" aria-hidden="true"><path d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path></svg>
</button>

更新：要使用 class globo-form-app 向元素添加活性，您可以这样做

document.querySelector('.globo-form-app').classList.add('active');

Answer 2

我想通了！

一些进一步的测试表明，揭示 pop-up 形式所需要做的就是将 'active' 添加到包含 <div>.[=16 的类中=]

可悲的是，有问题的 <div> 没有 ID，因此我不得不通过 getElementsByClassName()，以我非常有限的 javascript 知识进行了一些反复试验。

最后我找到了两个解决方案：

直接在onclick中：

<a href="#" onclick="document.getElementsByClassName('globo-form-app')[0].className += ' active'">show the pop-up form!</a>

有函数：

<script type="text/javascript">
   function showform() {
      document.getElementsByClassName('globo-form-app')[0].className += ' active';
   }
</script>

<a href="#" onclick="showform()">show the pop-up form!</a>

剩下的就是隐藏我不需要的浮动按钮。我通过 CSS:

做到了这一点

.floating-button {
    visibility: hidden;
}

事后看来，我应该问的问题是：

How do I add a class via onclick to an element that doesn't have an ID

如何使用按钮 launch/trigger 我的注册表单 pop-up 或 text-link？

How can I launch/trigger my signup form pop-up with a button or text-link?

javascript

button

triggers

onclick

popup