How can I create a modal effect for my button?
Question
I am trying to create a modal effect for my form that has a "Send" button. I want it so when the user presses the button, they will receive a pop-up effect saying that their message has been submitted. How can I do this with the usage of the form and input tags? Thanks. Down below is the code I am using.
.container { height: auto; width: 40%; font-family: 'Hind'; margin: 0 auto; margin-top: 40px; display: block; background: lightblue; padding: 20px; border-radius: 15px; position: absolute; left: 20px; }.container2 { height: auto; width: 40%; font-family: 'Hind'; margin: 0 auto; margin-top: 40px; display: block; background: lightblue; padding: 20px; border-radius: 15px; position: absolute; right: 20px; bottom: -220px; } form { font-family: 'Hind'; padding: 0; width: 90%; border-radius: 15px; margin: 0 auto; margin-bottom: 20px; }.feedback-input { color: #000; font-family: 'Hind'; font-weight: 400; font-size: 18px; border-radius: 0; margin-right: 0; line-height: 22px; background-color: none; padding: 13px 13px 13px 13px; margin-bottom: 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-bottom: 2px solid #22A7F0; border-top: none; border-left: none; border-right: none; }.feedback-input:focus { box-shadow: 0; color: #3498db; transition: .4s ease; outline: none; border-bottom: 2px solid black; padding: 13px 13px 13px 13px; }.focused { color: #30aed6; border: #30aed6 solid 3px; } textarea { width: 100%; height: 150px; line-height: 150%; resize: vertical; } #button-blue { font-family: 'Hind'; width: 100%; border: none; cursor: pointer; background-color: #22A7F0; color: white; font-size: 24px; padding-top: 22px; padding-bottom: 22px; margin-top: -4px; font-weight: 700; transition: .3s ease; } #button-blue:hover { background-color: rgba(0, 0, 0, 0); color: black; background: #22A7F0; }.submit:hover { color: #22A7F0; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <h1>Contact Form</h1> <h2>Reach out to us for any inquiry.</h2> <form> <p class="name"><input class="feedback-input" id="name" name="name" placeholder="Name" type="text"></p> <p class="email"><input class="feedback-input" id="email" name="email" placeholder="Email" type="text"></p> <p class="text"> <textarea class="feedback-input" id="comment" name="text" placeholder="Message"></textarea></p> <div class="submit"> <input id="button-blue" type="submit" value="SEND!"> </div> </form> </div> <script src="script.js"></script> </body> </html>
2 answers
solution1
0 2020-12-02 14:15:55
This will likely depend on how you're submitting the form to your server - if the user will be staying on the same page as the form, you can use <form onsubmit="submitFunction(event)"> to have submitFunction(event) called when the form is submitted. (You'll need to call event.preventDefault() first in that function to avoid the page being reloaded.) You can then use alert("Message"); to display a pop-up box with a message. You could also un-hide an element notifying the user that the form has been submitted, or use a JS modal library if you'd like the notification to be fancier.
If you're using PHP or another language that will reload the page or redirect the user after the form is submitted, it might be best to set a GET or POST variable like mypage.php?submitted=true after submitting the form and check for that to display a success message or not - or just redirect to a new page that displays a success message, which you could also do if using JavaScript.
solution2
0 2020-12-02 14:16:28
Here is a working exemple which uses BootStrap and Jquery. For more examples: https://getbootstrap.com/docs/4.0/components/modal/
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Send message </button> <;-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×.</span> </button> </div> <div class="modal-body"> Your message has been transmitted. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.