如何使用按钮或文本链接启动/触发我的注册表单弹出窗口？

Question

我正在使用 Shopify 插件 ( Form Builder ) 创建一个注册表单弹出窗口。

表单设置为在按下浮动按钮时触发，它按预期工作（这是开箱即用的行为）。

我想借用/劫持浮动按钮的功能，通过按下我分配给自己的按钮或文本链接来启动弹出窗口。

通过将此 DIV 添加到给定页面来调用浮动按钮和弹出窗口：

<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 添加到我自己的按钮或链接，什么也不会发生。

包含的完整代码如下所示（我稍微清理了代码，删除了实际表单和样式的 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>

我似乎无法弄清楚如何使我自己的按钮启动弹出窗体。

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

更新：我找到了一个解决方案，见下文。 可以在我的商店的主页上看到实施，方法是单击“特色收藏”部分中的“发布特定信件时获得通知”按钮。 我已经删除了测试页面的链接。

任何和所有建议都将受到欢迎！

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

我设法弄明白了！

一些进一步的测试表明，显示弹出窗体所需要做的就是将“active”添加到包含<div>的类中。

可悲的是，有问题的<div>没有 ID，所以我不得不通过 getElementsByClassName() 找到 go，这让我以非常有限的 javascript 知识进行了一些试验和错误。

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

直接拨打onclick：

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

使用 function：

<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;
}

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

如何通过 onclick 将 class 添加到没有 ID 的元素

如何使用按钮或文本链接启动/触发我的注册表单弹出窗口？

问题描述

2 个解决方案

解决方案1
0 2022-04-07 13:43:14

解决方案2
0 已采纳 2022-04-08 10:44:25

如何使用按钮或文本链接启动/触发我的注册表单弹出窗口？

问题描述

2 个解决方案

解决方案1 0 2022-04-07 13:43:14

解决方案2 0 已采纳 2022-04-08 10:44:25

解决方案1
0 2022-04-07 13:43:14

解决方案2
0 已采纳 2022-04-08 10:44:25