Всплывающая контактная форма Wordpress

#php #wordpress #wordpress-theming #contact-form-7

#php #wordpress #wordpress-тематизация #контактная форма-7

Вопрос:

Я использую контактную форму с контактной формой 7 , но мне нужно показывать ее , когда я нажимаю кнопку на передней панели , как всплывающее окно , как я могу это сделать, не используйте никаких плагинов, я хочу знать, как ее закодировать

Ответ №1:

Для этого вам нужен javascript. Если вы заинтересованы в изучении этого, как вы описываете, то следуйте некоторым онлайн-урокам, таким как w3schools.com

Ответ №2:

Создайте лайтбокс и скройте стиль отображения Создайте кнопку, отображающую этот лайтбокс, нажав на нее

 $(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; }

 lt;html gt; lt;headgt; lt;titlegt;PopUplt;/titlegt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;h1gt;my titlelt;/h1gt; lt;div class="content"gt;my contentlt;/divgt; lt;button class="show-popup"gt;Show PopUplt;/buttongt; lt;div class="lightbox"gt;  lt;div class="popup"gt;  lt;div class="popup-content"gt;  PopUp content  lt;span class="close"gt;Xlt;/spangt;  lt;/divgt;  lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;