弹出联系表格 Wordpress
[英]Popup contact form Wordpress
问题描述
I dose a contact form with contact form 7, but I need to show it when i press on button on front end like a popup, how can I make it, don't use any plugins, I want to know how to code it
我使用联系表格 7 填写联系表格，但是当我按下前端的按钮时需要显示它，就像弹出窗口一样，我该如何制作它，不要使用任何插件，我想知道如何编码
2 个解决方案
解决方案1
0 2021-11-28 00:56:44
You need javascript to do that.你需要 javascript 来做到这一点。 If you are keen on learning that, as you describe, then follow some online tutorials like w3schools.com如您所描述的，如果您热衷于学习，请遵循一些在线教程，例如 w3schools.com
解决方案2
0 2021-11-28 09:29:33
Create a lightbox and hide the display style Create a button that display this lightbox by clicking on it创建一个灯箱并隐藏显示样式 创建一个按钮，通过单击它来显示此灯箱
$(document).ready(function(){ $(".show-popup").click(function(){ $(".lightbox").slideDown(); }); $(".close").click(function(){ $(".lightbox").slideUp(); }); });
body{ text-align: center } h1{ margin-top: 50px }.content{ font-size: 18px; margin-bottom: 50px }.lightbox{ display: none; position: fixed; top: 0; left: 0; background: #999; opicity: 0.8; width:100%; height: 100%; z-index: 99999; }.popup{ position: absolute; top: 40%; left: 0; width: 100%; height: auto; opacity: 1; }.popup-content{ background: #fff; width: 600px; max-width: 90%; margin: 0 auto; border-radius: 10px; padding: 20px; position: relative; }.close{ position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; line-height: 20px; cursor: pointer; border-radius: 100%; background: #ddd; color: #000; display: inline-block; }
<html > <head> <title>PopUp</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h1>my title</h1> <div class="content">my content</div> <button class="show-popup">Show PopUp</button> <div class="lightbox"> <div class="popup"> <div class="popup-content"> PopUp content <span class="close">X</span> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.