Popup contact form Wordpress-CodePudding

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

CodePudding user response：

You need javascript to do that. If you are keen on learning that, as you describe, then follow some online tutorials like w3schools.com

CodePudding user response：

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>