[英]How can I create a modal effect for my button?
我正在嘗試為具有“發送”按鈕的表單創建模態效果。 我想要它，所以當用戶按下按鈕時，他們會收到一個彈出效果，說明他們的消息已提交。 如何使用表單和輸入標簽來做到這一點？ 謝謝。 下面是我正在使用的代碼。
.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>
這可能取決於您將表單提交到服務器的方式 - 如果用戶將與表單停留在同一頁面上，您可以使用<form onsubmit="submitFunction(event)">來擁有submitFunction(event)提交表單時調用。 （您需要先在 function 中調用event.preventDefault()以避免重新加載頁面。）然后您可以使用alert("Message"); 顯示帶有消息的彈出框。 您還可以取消隱藏通知用戶表單已提交的元素，或者如果您希望通知更漂亮，可以使用 JS 模態庫。
如果您使用 PHP 或其他會在提交表單后重新加載頁面或重定向用戶的語言，最好設置一個 GET 或 POST 變量，如mypage.php?submitted=true是否顯示成功消息 - 或者只是重定向到顯示成功消息的新頁面，如果使用 JavaScript，您也可以這樣做。
這是一個使用 BootStrap 和 Jquery 的工作示例。 更多示例： 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>
如果我使用單獨的html / css頁面，如何創建模式彈出效果？
[英]How can I create modal popup effect, If I'm using separate html/css pages?
如何使用 gsap scrolltrigger 在我的點擊呼叫按鈕上創建淡入淡出效果？
[英]How do I create a fade in effect on my click to call button using gsap scrolltrigger?
當我按下影響效果的按鈕時，如何做向下滑動效果以不使我的網頁回到頂部？
[英]How can I do the slide down effect to not bring my web page back to top when I press the button that actions the effect?
我如何在模態表單對話框jquery中更改按鈕的字體大小
[英]How can i change the font-size of my button in my modal form dialog jquery
如何在我的模態上創建第二個關閉按鈕（除了左上角x）
[英]How do I create a second close button on my modal (in addition to the top left x)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.