javascript - 如何在模态表单中添加感谢消息并使其具有响应性?
问题描述
现在,我已经设法构建了一个弹出表单,但我有两个问题。
- 表单没有响应。
- 填写/提交表格后 - 它会将我带到一个单独的登录页面以再次填写。
预期行为:相反,我希望它在模态提交后立即有一条消息。比如“谢谢”。
这可能是滴水的问题,不确定。
这是表单代码:
<div class="modal" id="myModal">
<!--{cke_protected}{C}%3C!%2D%2D%20Modal%20content%20%2D%2D%3E-->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span></div>
<div class="modal-body">
<form action="https://www.getdrip.com/forms/828915861/submissions" data-drip-embedded-form="828915861" method="post">
<h3 data-drip-attribute="headline">Get a copy of Webinar Promotion Strategies for you to read at your leisure</h3>
<div data-drip-attribute="description"><br></div>
<div><label for="drip-fname">First Name</label><br><input id="drip-fname" data-cke-saved-name="fields[fname]" name="fields[fname]" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
<div><label for="drip-email">Email Address</label><br><input id="drip-email" data-cke-saved-name="fields[email]" name="fields[email]" type="email" value="" data-cke-editable="1" contenteditable="false"></div>
<div aria-hidden="true" style="display: none;"><label for="website">Website</label><br><input autocomplete="false" id="website" data-cke-saved-name="website" name="website" tabindex="-1" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
<div><input data-drip-attribute="sign-up-button" type="submit" value="Download Now" data-cke-editable="1" contenteditable="false"></div>
</form>
</div>
<div class="modal-footer"><button></button></div>
</div>
这是 CSS 样式:
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
flex-direction: column;
align-items: stretch;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 25%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 16px;
background-color: #d6812e;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 10px 16px;
background-color: #d6812e;
}
</style>
解决方案
尝试将您的表单标签更改为:
<form action="" data-drip-embedded-form="828915861" method="post" onsubmit="alert('Thank You.');" novalidate>
推荐阅读
- android - 使用导航组件 API 时更改语言 24+
- c# - Blazor 是否有一些机制像 vue 中的 $attrs 一样工作?
- python - 如何修复“ValueError:int() 的无效文字,基数为 10:”
- c# - EF 6 - 无法将视图和表格添加到我的 edmx
- machine-learning - 什么是 RandomSearchCV 和 GridSearchCV?
- python - 如何将使用相同变量的两个 SeleniumLibrary 关键字组合成自定义关键字并在其他关键字中调用?
- javascript - 将配置文件移出项目根目录(webpack)
- python - 函数 replace( ) 似乎不起作用
- excel - 如何在 Excel 中使用 vba 从 Outlook 日历中获取存档的会议
- automated-tests - 如何使用 dataprovider 在测试注释中设置行数据?