How to open popup module in html
Step: 1 we create a html popuform.html
step: 2 In second step we create style.css file
step: 3 we create java script file for popup hiden and show
popup buton for oprn popup
Step1:
popuform.html page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<!--<button class="open-button" onclick="openForm()">Open Form</button>-->
<div>
<button class="button" onclick="openForm()">
<img src="chat.png"/>
</button>
</div>
<div class="container" id="myForm" >
<div class="wrapper">
<div class="div1"></div>
<div class="formhad"><h2>Chat With us!</h2> </div>
<div class="closediv"><button onclick="closeForm()" class="minbutton"> - </button> </div>
</div>
<div>
<div class="gridsel">
<h6 class="h6">KnowledgeBase</h6>
<p class="p"> Save time with KnowledgeBase- easy to access know-how right in widget.
</p>
</div>
<div>
<div class="chartbot">
<div class="p1">
<p>Hey, support heroes are live 24/7. Start a chat if you have any questions!</p>
</div>
</div>
</div>
<div class="formbox">
<form action="#" class="form">
<div>
<label for="fname">Your Name</label>
<input type="text" id="fname" name="firstname" >
</div>
<div>
<label for="E-mail">E-mail</label>
<input type="email" id="email" name="email" >
</div>
<div>
<label for="our website address">Your website address</label>
<input type="text" id="" name="" >
</div>
<div>
<div class=boxtxt>I agree to have my personal data processed by LiveChat, Inc. for chat support. Full policy
</div>
<div class="checkbox">
<input type="checkbox" id=" " name=" " >
<label for="our website address">Agree</label>
</div>
</div>
<div>
<button class="chatbutton button1">Start chat</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Step 2
We create style.css file and it link our popuform.htm file using <link rel="stylesheet"
href="style.css">
style.css page
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Button used to open the contact form - fixed at the bottom of the page */
/* ## Chart image buttion ##*/
img {
width: 68px;
height: 67px;
}
.button{
background-color: #ffffffef; /* Green */
border: none;
color: white;
padding: 6px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
opacity: 0.8;
bottom: 23px;
right: 28px;
width: 95px;
position: fixed;
border-radius: 50%;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* form.html csss */
p {
/* color: rgb(95, 92, 92);*/
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
font-family: "Noto Sans", sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
margin-top: -8px;
/*font-size: 13px;*/
font-size: 0.875rem;
font-weight: normal;
color: rgb(17, 17, 17);
padding-left: 12px;
}
/* form css */
.closediv{
text-align: center;
margin-top: -7px;
grid-column: 3;
grid-row: 4;
background-color: white;
}
input[type=text], select, textarea {
width: 100%;
padding: 10px;
padding-left: 50px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
background-color: #faf8f8;
}
input[type=email] {
width: 100%;
padding: 10px;
padding-left: 50px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
background-color: #faf8f8;
}
.container {
border-radius: 5px;
background-color: #faf8f8;
padding: 20px;
margin-top: 30px;
margin-bottom: 20px;
position: fixed;
margin-left: 25px;
width: 344px;
height: 611px;
max-width: 100%;
max-height: calc(100% + 0px);
min-height: 0px;
min-width: 0px;
overflow-x: hidden;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.form{
padding: 26px;
padding-left: 17px;
text-align: left;
text-justify: inherit;
font-size: 16px;
padding-top: 4px;
}
.form label{
padding: 2px;
}
.form input{
padding: 5px;
}
.formhad{
font-size: 10px;
background-color: white;
margin-top: -20px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
margin-bottom: 0px;
font-family: Sans-serif;
transition: 0.3s;
margin-left: -21px;
margin-right: -21px;
grid-column: 2;
grid-row: 4;
}
.gridsel{
margin-top: 25px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 28px;
background-color: rgb(255, 255, 255);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.gridsel .h6{
font-size: 17px;
margin-top: 2px;
margin: 15px;
}
.chartbot{
margin-top: 5px;
padding-top: 16px;
padding-bottom: 62px;
height: 66px;
background-color: #fffefe;
border-radius: 50;
border: rgb(255, 255, 255);
border-style: solid;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.p1{
padding-top: 0px;
padding-bottom: 0px;
}
/* form box css */
.formbox{
background-color: #ffffff;
border-style: solid;
border: rgb(0, 0, 0);
padding-top: 12px;
padding-bottom: 0px;
margin-top: 26px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.boxtxt{
font-size: 0.875rem;
font-weight: normal;
color: rgb(17, 17, 17);
overflow-wrap: break-word;
word-break: break-word;
}
.checkbox{
margin: 0px;
font-size: 14px;
font-family: "Noto Sans", sans-serif;
color:rgb(104, 104, 104);
text-align: left;
}
/* -----button------ */
.chatbutton{
background-color: #b63f21ef; /* Green */
border: none;
color: white;
padding: 14px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
}
.button1{
border-radius: 8px;
}
/*###For wrapdiv ######*/
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: white;
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
}
.div1{
grid-column: 1;
grid-row: 2 / 5;
background-color: white;
}
/* ### min button ####*/
.minbutton{
cursor: pointer;
font-size: 18px;
border: none;
background-color: white;
}
Step:3 we create script file for html form block and none
myscript.js page
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
0 Comments