如何通过按钮或文本链接启动/触发我的注册表格弹出窗口

我使用的是一个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

更新：我找到了一个解决方案，请参阅下文。实现可以在我的商店主页上看到，点击"；当发布特定信件时得到通知"-按钮。我已经删除了测试页面的链接

欢迎提出任何建议！

我设法弄明白了！

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

遗憾的是，有问题的<div>没有ID，所以我不得不通过getElementsByClassName((，这用我有限的javascript知识进行了一些尝试和错误。

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

直接点击：

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

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

如何通过onclick向没有ID 的元素添加类

按钮正在传递(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>

UPDATE：要将活动添加到具有类globo-form-app的元素中，您可以执行此

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

相关内容

最新更新

热门标签：