I made a popup form using HTML, CSS and JavaScript but for some reason in chrome and firefox, it does not display properly. I’ve made the website with Bootstrap so I’m not sure if that is messing with it. It is supposed to be hidden until you press the chat button but it is showing in chrome. Any tips? here’s the site:
HTML:
`<script src=”JavaScript/JS.js”></script>’
‘<button class=”open-button” onclick=”openForm()”>Chat</button>
<div class=”chat-popup” id=”myForm”>
<form action=”
method=”POST” class=”chat-container”>
<h1 style=”color:white;”>Chat</h1>
<label for=”msg” style=”color:white;”><b>Message</b></label>
<textarea placeholder=”Type message..” name=”msg” required></textarea>
<button type=”submit” class=”btn”>Send</button>
<button type=”button” class=”btn cancel”
onclick=”closeForm()”>Close</button>
</form>
</div>`
CSS:
`/* Button used to open the chat form – fixed at the bottom of the page */
.open-button {
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: .1vw solid white;
border-radius: .5vw;
padding: 1vh 3vw;
cursor: pointer;
opacity: 0.9;
position: fixed;
bottom: 5vh;
right: 2vw;
width: 10vw;
}
/* The popup chat – hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 2vw;
border: .5vh solid #252525;
z-index: 9;
}
/* Add styles to the form container */
.chat-container {
max-width: 300px;
padding: 10px;
background-color: #252525;
}
/* Full-width textarea */
.chat-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 200px;
}
/* When the textarea gets focus, do something */
.chat-container textarea:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.chat-container .btn {
background-color: grey;
color: white;
border: .1vw solid white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.chat-container .cancel {
background-color: transparent;
color: white;
border: .1vw solid grey;
}
/* Add some hover effects to buttons */
.chat-container .btn:hover, .open-button:hover {
opacity: 1;
}
`
JavaScript:
`function openForm() {
document.getElementById(“myForm”).style.display = “block”;
}
function closeForm() {
document.getElementById(“myForm”).style.display = “none”;
}`