We Keep Coding

Modal content at center [duplicate]

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 26 days ago.
How to make the captcha at the center when I click the submit button? I am having a hard time centering the captcha in the center. Kindly take a look in the jsfiddle attached hehe
https://jsfiddle.net/rzant4kb/
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<button id="myBtn" class="btn-submit" type="submit">SUBMIT</button>
<br>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p>Captcha Verification</p>
<!--Captcha Verification-->
<div class="wrapper">
<div class="captcha-area">
<div class="captcha-img">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form action="#" class="input-area">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button class="check-btn">Check</button>
</form>
<div class="status-text"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Centered the captcha input field using :
.wrapper{
width: 65%;
margin: 0 auto;
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
* {
margin: 0;
border: 0;
}
hr {
border-color: #6ACEBC;
border-style: solid;
border-width: 0.7vw;
background: #6ACEBC;
height: 30px;
}
.logo {
width: 18%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
}
.login {
text-align: center;
display: block;
margin-top: 15px;
}
.username, .password {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 1vw;
margin-right: 10px;
}
.input-details {
border: black 1px solid;
width: 16vw;
height: 2vh;
}
.forgot-password {
margin-left: 230px;
text-decoration: none;
color: #6ACEBC;
font-family: Arial, Helvetica, sans-serif;
margin-top: 20%;
font-size: 75%;
}
.btn-submit {
background: #C78632;
border-radius: 301px;
padding: 5px;
color: white;
font-weight: bold;
margin-top: 20px;
width: 150px;
height: 30px;
}
.line {
bottom: 0;
position: absolute;
background-color: #6ACEBC;
width: 98.7%;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
height: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 34px;
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {
padding: 2px 16px;
align-items: center;
}
.modal-body p {
margin-top: 50px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
}
.wrapper{
width: 65%;
margin: 0 auto;
}
.wrapper .captcha-area{
display: flex;
height: 65px;
margin: 30px 50px 20px 0;
align-items: center;
justify-content: space-between;
}
.captcha-area .captcha-img{
height: 100%;
width: 345px;
user-select: none;
background: #9FFBA8;
border-radius: 5px;
position: relative;
}
.captcha-img img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
opacity: 0.95;
}
.captcha-img .captcha{
position: absolute;
left: 50%;
top: 50%;
width: 100%;
color: #000;
font-size: 35px;
text-align: center;
letter-spacing: 10px;
transform: translate(-50%, -50%);
text-shadow: 0px 0px 2px #b1b1b1;
font-family: 'Noto Serif', serif;
}
.wrapper button{
outline: none;
border: none;
color: #000;
cursor: pointer;
background: #9FFBA8;
border-radius: 5px;
transition: all 0.3s ease;
}
.wrapper button:hover{
background: #6ACEBC;
}
.captcha-area .reload-btn{
width: 75px;
height: 100%;
font-size: 25px;
}
.captcha-area .reload-btn i{
transition: transform 0.3s ease;
}
.captcha-area .reload-btn:hover i{
transform: rotate(15deg);
}
.wrapper .input-area{
height: 60px;
width: 85%;
position: relative;
}
.input-area input{
width: 100%;
height: 100%;
outline: none;
padding-left: 20px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #bfbfbf;
}
.input-area input:is(:focus, :valid){
padding-left: 19px;
border: 2px solid #4db2ec;
}
.input-area input::placeholder{
color: #bfbfbf;
}
.input-area .check-btn{
position: absolute;
right: 7px;
top: 50%;
font-size: 17px;
height: 45px;
padding: 0 20px;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
}
.input-area input:valid + .check-btn{
opacity: 1;
pointer-events: auto;
}
.wrapper .status-text{
display: none;
font-size: 18px;
text-align: center;
margin: 20px 0 -5px;
}
#media (max-width: 506px){
body{
padding: 0 10px;
}
.wrapper{
padding: 22px 25px 35px;
}
.wrapper header{
font-size: 25px;
}
.wrapper .captcha-area{
height: 60px;
}
.captcha-area .captcha{
font-size: 28px;
letter-spacing: 5px;
}
.captcha-area .reload-btn{
width: 60px;
margin-left: 5px;
font-size: 20px;
}
.wrapper .input-area{
height: 55px;
}
.input-area .check-btn{
height: 40px;
}
.wrapper .status-text{
font-size: 15px;
}
.captcha-area .captcha-img{
width: 250px;
}
}
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<button id="myBtn" class="btn-submit" type="submit">SUBMIT</button>
<br>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p>Captcha Verification</p>
<!--Captcha Verification-->
<div class="wrapper">
<div class="captcha-area">
<div class="captcha-img">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form action="#" class="input-area">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button class="check-btn">Check</button>
</form>
<div class="status-text"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Footer only works when Zoom Text Only is set in Firefox, text overflows if no Zoom Text Only?

I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:
body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}
img.logo1 {
width: 200px;
}
.wrapper {
border: 2px solid;
}
.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}
footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}
footer.caautos h2, footer.caautos h3 {
margin: 10px;
}
div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}
div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
div.content p {
margin-left: 5px;
}
.results-vehicleresult {
margin: 20px;
}
.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}
.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}
.columns-vehicleresult .column {
flex: 33.33%;
}
/*
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
*/
.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}
.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
h1.eurola {
font-size: 240%;
}
.vehiclesold {
color: red;
}
picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}
/*
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
*/
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}
picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}
ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.mauen li {
float: left;
}
ul.mauen a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}
.imagallery1 li {
display: inline;
margin: 0;
}
/*
.imagallery1 img {
width: 20%;
height: auto;
}
*/
.imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}
img.hald {
width: 230px;
}
div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}
.logo-112 blockquote {
font-weight: 700;
}
img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
<link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>
<div class="results-vehicleresult">
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div><div class="columns-vehicleresult">
<picture>
<img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
</picture>
<div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
</div>
</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>✆ 01909 496000</h1>
</div>
</footer>
© 2022
</div>
</body>
</html>
For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?
It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.

when you change page zoom, the browser changes resolution. use #media for a specific resolution.
you can read about that here.

Simple Modal won't show on click

I did have the modal working and showing when I press the button. However, now (not sure how I've done it) I cannot get the modal box to open.
I have my page laid out as an image and then the button below the image to open the modal.
This is my HTML...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://kit.fontawesome.com/454c24fdd9.js"></script>
<title>Elle and Belle Design</title>
</head>
<body>
<div class="logo">
<img src="logo.png" class="logoimg">
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Information</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div></li>
<li>Contact Us</li>
</ul>
</nav>
<div class="header">
<h1>Elle and Belle Design</h1>
<h2>Bespoke Handmade Headbands and Accessories</h2>
</div>
</div>
<div class="mainbody">
<div class="sidebar">
<h3>Updates</h3>
</div>
<div class="section-1">
<img src="silverband.jpg" class="previewimg"><br>
<button class="headbutton">Preview</button>
<div id="headmodal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p7>Belle Band</p7><br>
<img src="silverband.jpg" class="headbands">
<img src="silverbandon.jpg" class="headbands">
<p6>£15</p6><br>
<p4>Our Belle Band is hand-crafted with love and care in both thick and thin sizes.</p4><br>
<p4>We use a range of small silver jewels incorporated with white pearls and flowers for that ultimate wedding look</p4>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("headmodal");
// Get the button that opens the modal
var btn = document.getElementById("headbutton");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
<div class="footer">
<div id="socialmedia">
<i class="fab fa-facebook-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
<i class="fab fa-instagram fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
<i class="fab fa-twitter-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
</div>
<br>
<p3>Find Us on Social Media</p>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
/* Fonts */
#font-face {
font-family: 'greatvibes';
src: local('greatvibes.otf');
src: url('greatvibes.otf');
format: ('opentype');
}
#font-face {
font-family: 'tenderness';
src: local('tenderness.otf');
src: url('tenderness.otf');
format: ('opentype');
}
/* Headings and Paragraphs */
h1 {
font-family: 'greatvibes';
font-size: 7vw;
font-weight: bold;
}
h2 {
font-family: 'greatvibes';
font-size: 3.5vw;
}
h3 {
font-family: 'greatvibes';
font-size: 2vw;
text-align: center;
}
h4 {
font-family: 'greatvibes';
font-size: 2vw;
text-align: center;
margin-bottom: 0;
}
p2 {
font-family: 'greatvibes';
font-size: 1.9vw;
}
p3 {
font-family: 'greatvibes';
font-size: 2vw;
}
p4 {
font-family: 'tenderness';
font-size: 1.5vw;
line-height: 2.5vw;
}
p5 {
font-family: 'tenderness';
font-size: 1.5vw;
line-height: 2.5vw;
}
p6 {
font-family: 'greatvibes';
font-size: 4vw;
}
p7 {
font-family: 'greatvibes';
font-size: 4vw;
}
/* Sections */
.header {
padding: 17vw;
text-align: center;
height: auto;
background-image: url("decorhands.jpg");
background-size: 100%;
}
body {
margin: 0;
padding: 0;
background:whitesmoke;
font-family: 'tenderness';
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex: 20%;
background-color: #FEDCD2;
min-height: 500px;
text-align: center;
padding: 1vw;
}
.section-1 {
flex: 80%;
background-color:whitesmoke;
}
.bands {
flex: 50%;
padding: 1em;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
min-height: 10vw;
}
.socialmedia {
display: flex;
align-items: flex-end;
}
.home {
width: 100%;
height: auto;
opacity: 0.7;
}
/* Navigation bar */
.main-nav {
display: flex;
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 0.9;
height: 5vw;
width: 100%;
}
.main-nav ul {
list-style-type: none;
margin: 0 0 0 20vw;
padding: 0;
overflow: visible;
top: 0;
width: 100%;
height: 5vw;
}
.main-nav ul li {
display: inline-block;
text-align: center;
margin-left: 2vw;
height: 5vw;
}
.main-nav li {
float: left;
height: 5vw;
}
.logoimg {
height: 5vw;
width: auto;
float: left;
position: fixed;
margin-left: 1vw;
z-index: 1;
}
.main-nav li a, .dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: whitesmoke;
text-align: center;
font-family: 'tenderness';
font-size: 1.5vw;
height: 5vw;
border-bottom: 0.3vw solid transparent;
}
.main-nav li a:after {
display: block;
content: '';
border-bottom: 0.3vw solid whitesmoke;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
height: 1.2vw;
min-width: 6vw;
}
.main-nav li a:hover:after {
height: 1.2vw;
transform: scaleX(1);
}
.main-nav a:active {
border-bottom: 1vw solid whitesmoke;
}
li.products {
display: inline-block;
height: 5vw;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.35);
min-width: 8vw;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
height: 5vw;
}
.products:hover .dropdown-content {
display: block;
}
/* Contact Form */
.contact-header {
margin-top: 5px;
}
.contact-header h3 {
font-size: 2.5vw;
text-align: center;
}
.contact-form {
text-align: center;
}
.form-control {
width: 80%;
background: transparent;
border: none;
outline: none;
color: black;
font-size: 1.2vw;
border-bottom: 0.2vw solid #DF744A;
margin-bottom: 1vw;
padding: 0.5vw;
}
form .submit {
background-color: #DF744A;
border-color: transparent;
color: whitesmoke;
font-size: 1.5vw;
text-align: center;
}
form .submit:hover {
background-color: rgb(209, 84, 35);
cursor: pointer;
}
/*Headband Modal*/
.modal {
display: none;
position: fixed;
z-index: 1;
padding: 10vw;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.headbands {
height: auto;
width: 30vw;
}
.previewimg {
width: 20vw;
height: auto;
margin: 1vw;
}
I am not sure why all of a sudden it wont let me open the modal.
Please help!
Thanks
Mary

As I can see, in JS code you are trying to get the button in a wrong way.
getElementById will not work in that case because your button does not have an id attribute
Maybe try to grab the button like so:
document.querySelector(".headbutton");
Let me know if it solved the issue.
For more information about querySelector see this link
and also see this link for querySelectorAll

It is just for a simple reason and that is you forget to get btn in the right way. You want to get your button with getElementById but there is no element with this id in your page and that is the error part!
So you can change the class attribute to id or you can get your button with getElementByClassName in your javascript code.
I hope this helps :)

You can change your btn.onclick function to a regular function such as:
function buttonClick() {
modal.style.display = "block";
}
and call the onclick method in the button tag:
<button class="headbutton" onClick="buttonClick()">Preview</button>
Working jsFiddle: https://jsfiddle.net/t29qh6f3/
I did this for your span.onclick function as well.
This should make your modal appear again. Hope this helps.

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

Visual Studio 2015 is not completely loading my stylesheet

Visual Studio 2015 is not completely loading my stylesheet so there are some elements missing when I test it. I'm not sure how to fix this issue. I'm new to Visual Studio so I'm not sure where the problem is. I've included my html & css files. Thank you
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your ASP.NET application</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="home">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content"><p>Create, Collaborate, Innovate</p></div>
<div class="fadein">
<img src="images/pic1.png" alt="" style="width: 90%; height: 825" class="active" />
<img src="images/pic2.png" alt="" style="width: 90%; height: 825;" />
<img src="images/pic3.png" alt="" style="width: 90%; height: 825;" />
<img src="images/pic4.png" alt="" style="width: 90%; height: 825;" />
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="Images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>
For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators Tulsa has to offer. We love working
on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.
</p>
<p>
Our paramount value is to approuch the material with excellence and an orignal point of view to tell a unique and compelling story. It is our belief that
life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.
</p>
<p>
We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created
mulitple award winning music videos, short films and evevn a feature film. Feel free to take a look around the site, drop us an email, we look forward to hearing
from you.
</p>
<img src="images/email1.png" alt="email1" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects</h5>
<ul>
<li>
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</li>
<li>
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</li>
<li>
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</li>
</ul>
</div>
<div id="contact">
<section3>
<h3>To connect with us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a>
<img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');},
3000);
});
</script>
</body>
</html>
My CSS
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: rgba(60,59,59,1.00);
transition-duration: 1s;
z-index: 25;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
div#home {
height: 950px;
background-color: transparent;
}
.fadein {
position: relative;
width: 100%;
height: 825px;
}
.fadein img {
border: 80px solid rgba(60,59,59,1.00);
height: 825;
position: absolute;
left: -225px;
top: -35px;
z-index: -9;
}
#header {
background-color: rgba(60,59,59,1.00);
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 300px;
right: 25px;
position: fixed;
z-index: 25;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(Images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(Images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(Images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(Images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(Images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(Images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
width: 550px;
left: 50%;
margin-left: -15%;
margin-top: 25%;
color: rgba(249,0,3,1.00);
position: absolute;
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -5px;
padding-top: 100px;
z-index: 35;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
div#projects ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#projects li {
float: left;
margin-top: 65px;
margin-left: 120px;
}
div#projects li p {
margin-left: 20px;
text-align: center;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00)
}
#media only screen and (max-width: 632px) {
div#projects li {
float: none;
margin-top: 65px;
margin-left: 95px;
}
div#projects li p {
margin-left: 10px;
text-align: center;
}
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}

So the style sheet shows up, it's just the images referenced in your style sheet that aren't showing? When I've had that problem, it's either an incorrect filepath or the content files haven't actually been added to the project. If you right click on your images folder and click "Add > Existing Item" for all your images, that fixes the problem (for me at least) sometimes.