![](/img/trans.png)
[英]How to show a thank you message after someone submits a form in Angular?
[英]How can I add a Thank you message in a Modal Form and make it responsive?
現在,我已經設法構建了一個彈出表單,但我有兩個問題。
預期行為:相反,我希望它在模態中提交后立即有一條消息。 比如“謝謝”。
這可能是滴水的問題,不確定。
這是表單代碼:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.