We Keep Coding

Jquery With Button Onclick not display window

sorry for my English..I'm very new with javascript...
I want my Jquery code to open a Window,
Here is my code in javascript, Html and Css,
function layer_show_3()
{
$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
if(posTop<0)
posTop=0;
$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
$('#layerPreviewContent-3').show(600);
}
function layer_close_3()
{
$('#layerPreviewContent-3').hide(300);
$('#layerPreview-3').hide();
}
.kaufen {
float: right;
width: 45%;
background-color: #cccccc;
padding-right: 10%;
padding-bottom: 1%;
margin-left: 3%;
margin-top: 11%;
padding-top: 1%;
}
.tittle-kaufen {margin-left: 15%; font-weight: bold; width: 100%; float: left; }
.preis {margin-left: 4%; font-weight: bold; margin-top: 5%; float: left; }
.piece {float: right; font-weight: bold; padding-top: 20%; margin-right: 55%; }
.quantity {
float: left;
margin-top: 5%;
background-color: #eee;
position: relative;
width: 18%;
overflow: hidden;
margin-left: 3%;
border: 1px solid #b3b3b3;
margin-left: 9%;
}
.quantity input {
margin: 0;
text-align: center;
width: 5%;
padding: 0;
float: right;
color: #000;
font-size: 1.5rem;
border: 0;
outline: 0;
background-color: #d9d9d9;
}
.quantity input.qty {
position: relative;
border: 0;
width: 100%;
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
text-align: center;
font-weight: 400;
font-size: 15px;
border-radius: 0;
background-clip: padding-box
}
.quantity .minus, .quantity .plus {
line-height: 0;
background-clip: padding-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-background-size: 0.375rem 1.875rem;
-moz-background-size: 0.375rem 1.875rem;
color: black;
font-size: 1.25rem;
position: absolute;
height: 50%;
border: 0;
right: 0;
padding: 0;
width: 33%;
z-index: 3
}
.quantity .minus:hover, .quantity .plus:hover {background-color: #dad8da}
.quantity .minus {bottom: 0}
.button_wrap {
float: right;
min-width: 75%;
background-color: transparent;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
font-family: 'Open Sans', sans-serif;
color: #111;
margin-right: 1%;
padding-right: 1%;
}
.button_wrap_buttom {margin-top: 15%; margin-left: 6%; color: white; background-color: #b3b3b3; padding: 3%;}
.button_wrap_buttom:hover {background-color: #666666; }
.form-basket {
margin-top: 30px;
margin-bottom: 0px;
margin: 0;
padding: 0;
border: 0;
outline: 0 none;
font-size: 100%;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #111;
font-size: 18px;
line-height: 18px;
}
.addtobasket-container {
padding: 0;
margin: 0;
border: 0;
margin: 0;
padding: 0;
border: 0;
outline: 0 none;
font-size: 100%;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #111;
font-size: 1rem;
line-height: 18px;
}
/* ***** Anfang Fenster 1 producut **** */
#layerPreview-3 {position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff;
background-color: rgba(50, 50, 50, 0.5);
}
#layerPreviewContent-3{position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
width:30%;
margin-left:-250px;
height:40%;
-moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="kaufen">
<form class="form-basket" method="post" enctype="multipart/form-data">
<fieldset class="addtobasket-container">
<span class="tittle-kaufen">Rucksack aus Hanf Gelbe mit Zwei Riemen</span>
<span class="preis"> Preis 40 € </span>
<span class="piece">Stück</span>
<div class="quantity">
<input type="button" value="+" class="plus">
<input type="number" step="1" max="99" min="1" value="1" title="Qty" class="qty" size="4">
<input type="button" value="-" class="minus">
</div>
<div class="button_wrap" >
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
</div>
</fieldset>
</form>
<!-- En el momento que se pulse sobre la capa transparente se cerrara -->
<div id="layerPreview-3" > </div>
<div id='layerPreviewContent-3'>
<!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
<div id="tittel-text">Rucksack aus Hanf Gelbe <span id="closse-text" onclick="layer_close-3();">Schließen</span></div>
<div id="bild-text"><img alt="" src="photo/113.jpg"></div>
<div id="text-pruduct">
<p>Verfügbarkeit: <b>eine Menge</b></p>
<p>Zustellung innerhalb von: <b>1-2 Tage</b></p>
</div>
</div>
</div>
</div>
My Problem is when clicking the Botton Zum warenkorb hinzufügen nothing displays, when it should open a window..
Here is the JSFiddle Link for the code
Can someone please help me and explain with easy Words what I am doing wrong?

The problem is with how are you trying to handle an onclick event on a button, without taking into consideration that this button is a part of a form
In simple words, whenever a button is pressed inside of a form it tries to submit that form via html post request if not declared otherwise.
So if you want this to work you can do something like this.
Change this
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
to
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
with event being passed as parameter to layer_show_3 function.
Change your function declaration to
function layer_show_3(event) { ... }
and add this line at starting of the function
event.preventDefault();
this will override the default functionality of a button inside of a form.

How to stop Iframe (video) after modal close?

I met some problems in my code, I find some solutions in this forum but somehow it doesn't help me. So maybe you will find how to solve it. I need to stop the video after closing it with the cross icon and also after clicking on the modal. Also, it will be cool if this video starts from beginning after it opens again.
#font-face {
font-family: "BebasNeue";
src: url("fonts/BebasNeue.otf");
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
::selection {
background: #f3df4b; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #f3df4b; /* Gecko Browsers */
}
html, body {
height: 100%;
background: #f8f8f8; /* fallback for old browsers */
}
h1{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 6rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h2{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 3.5rem;
font-style: normal;
font-weight: normal;
font-variant: small-caps;
}
p{
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #111;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
/*/////////menu////////////*/
header{
height: 100px;
display: inline-block;
position: relative;
z-index: 100;
width: 100%;
}
.menu_box{
width: 100%;
overflow: hidden;
position: fixed;
}
.menu_box_logo{
float: left;
padding: 20px 20px 20px 20px;
}
.menu_box_ul {
float: right;
padding: 40px 0 20px 20px;
}
.menu_box_ul a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.75rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul a:hover {
color: #F3DF4B;
}
.menu_box_ul .icon {
display: none;
}
.menu_box_ul_more{
display: none;
top: 40px;
}
.menu_box_ul_more a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul_more a:hover {
color: white;
}
#media screen and (max-width: 826px) {
.menu_box_ul_more{
display: none;
}
}
#media screen and (min-width: 826px) {
.menu_box_ul_more.show{
display: none;
}
}
#media screen and (max-width: 826px) {
.menu_box_ul a {
display: none;
}
.menu_box_ul a.icon,
.menu_box_ul a.language {
display: inline;
}
}
#media screen and (max-width: 826px){
.menu_box_ul_more.show .icon{
position: absolute;
right: 0;
top: 0;
}
.menu_box_ul_more.show{
background-color: #f8f8f8;
text-align: center;
padding-top: 110px;
}
.menu_box_ul_more.show a{
display: block;
}
}
#a_checked{
color: #F3DF4B;
}
.menu_icon{
display: none;
}
/* The container <div> - needed to position the dropdown content */
.container{
margin-top: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f8f8f8;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/*/////////index////////////*/
.logo{
width: 100%;
text-align:center;
}
.text{
display:table-cell;
vertical-align: middle;
text-align:center;
width: 100%;
padding: 120px 20px 0px 20px;
margin: auto;
width: 50%;
}
.text1{
padding-top: 15px;
padding-bottom: 15px;
}
.text2{
padding-top: 15px;
padding-bottom: 15px;
}
.text2 .h2{
font-family: 'BebasNeue', sans-serif;
font-size: 2.5rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.text3{
padding-top: 15px;
padding-bottom: 15px;
}
.about_button{
padding-top: 15px;
padding-bottom: 15px;
line-height: 500px;
text-align: center;
height: 500px;
}
.text3_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.about_read_watch{
line-height: 100px;
text-align: center;
height: 100px;
margin-bottom: 60px;
margin-top: 20px;
}
.text4_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.button{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
}
.button2{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button3{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button:hover,
.button2:hover,
.button3:hover{
color: #000;
background-color: #f8f8f8;
border: 2px solid #000;
-webkit-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-moz-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-ms-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-o-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
}
#media (max-width:545px) {
.text1 h1{
font-size: 2.5rem;
}
.text1{
padding-top: 15px;
padding-bottom: 5px;
}
.text2{
padding-top: 5px;
padding-bottom: 5px;
}
.text2 h2{
font-size: 2rem;
}
.text3{
padding-top: 5px;
padding-bottom: 15px;
}
.text{
padding: 50px 20px 0px 20px;
}
}
.imglog{
margin-top: 70px;
width: 500px;
height: 190.5px;
}
#media (max-width: 470px) {
.imglog{
width: 250px;
height: 95.25px;
}
}
#media (max-width: 585px) {
.button3{
margin-top: 20px;
}
}
#media (max-width: 390px) {
.button2{
margin-top: 20px;
}
}
/*/////////footer////////////*/
#import url(https://fonts.googleapis.com/css?family=Lato);
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.footer {
height: 50px;
text-align: center;
}
.col-lg-6 .offset-lg-2 {
width: 260px;
display:block;
margin: 0 auto;
}
.col-lg-6 .offset-lg-2 ul{
padding:0;
list-style: none;
}
.social-icon {
color: #fff;
font-size: 1.875rem;
}
.social-icons{
margin-bottom: -1rem;
}
.social-icons li {
vertical-align: top;
display: inline;
}
.social-icons a {
color: rgb(234, 234, 234);
text-decoration: none;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-instagram:hover {
background-color: #9b6954;
}
/*/////////work.html file////////////*/
.col-lg-5.col-md-12 a{
text-decoration-line: none;
}
#div_box_video{
width: 650px;
height: 550px;
background-image: url(/./honey/rusne.jpg);
-ms-background-position-x: center;
-ms-background-position-y: bottom;
background-position: center bottom;
background-size: cover;
margin: 0 auto;
margin-top: 30px;
}
#div_box_video img{
z-index: 3;
}
#shadow_box{
position: relative;
width: 650px;
height: 550px;
background-color: rgba(137, 137, 137, 0.56);
z-index: 10;
text-align: center;
color: rgb(28, 28, 28);
}
#shadow_box:hover{
background-color: rgba(137, 137, 137, 0.9);
}
#popupBoxOnePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxTwoPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxThreePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxFourPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
.login-html{
width:70%;
height:85%;
position:absolute;
padding:90px 70px 50px 70px;
margin: auto;
top: 7.5%;
left: 15%;
border-radius: 10px;
}
.close {
position: absolute;
right: 20px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
#forphone2{
margin: 0 auto;
width: 60%;
}
#media (max-width:1298px) {
.sign-in-htm iframe{
height: 550px;
}
.login-html{
width: 90%;
left: 5%;
}
}
#media (max-width:1000px) {
.sign-in-htm iframe{
height: 400px;
}
.login-html{
width: 90%;
left: 5%;
top: 15%;
}
}
#media (max-width:780px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
}
}
#media (max-width:550px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 35px 50px 35px;
}
}
#media (max-width:450px) {
.sign-in-htm iframe{
height: 200px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 15px 50px 15px;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="lt-LT"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=""></script>
<script>
</script>
<link rel="icon" type="image/x-icon" href="../img/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="google-site-verification" content="" />
<title>Honey agency | Video Production</title>
<meta name="google-site-verification" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" itemprop="description" content="Main agiency "Video Production" services: video promotion, video creation, video" />
<meta name="keywords" itemprop="keywords" content="video promotion, video creation, video" />
<link rel="canonical" href="http://thehoney.lt/" />
<meta property="og:title" content="Begining"/>
<meta property="og:description" content="[fullwidth backgroundcolor="" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="top left" backgroundattachment="scroll" bordersize="1px" bordercolor="" paddingTop="" paddingBottom="20"]Make your story sweet as honey!Agiency "VIDEO PRODUCTION SERVICES" - is"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://thehoney.lt/"/>
<meta property="og:site_name" content="VIDEO PRODUCTION SERVICES"/>
<meta property="og:image" content="http://thehoney.lt/img/honey_logo_transparent_croped.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css?v=1.1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div id="popupBoxOnePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxOnePosition').style.display='none'" class="close" title="Close Modal1">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxTwoPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxTwoPosition').style.display='none'" class="close" title="Close Modal2">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700" src="https://www.youtube.com/embed/x-3BnCklSuE?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxThreePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxThreePosition').style.display='none'" class="close" title="Close Modal3">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxFourPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxFourPosition').style.display='none'" class="close" title="Close Modal4">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="wrapper">
<header>
<div class="menu_box" id="menu_box">
<div class="menu_box_logo">
<img class="imglogo" style="width: 250px; height:95,25px;" src="../img/honey_logo_transparent_croped.png" alt="Honey logo">
</div>
<div class="menu_box_ul" id="myTopnav">
Our work
Who we are
Contact us
☰
</div>
<div class="menu_box_ul_more" id="myDropdown" class="dropdown-content">
Our work
Who we are
Contact us
</div>
</div>
</header>
<div class="container-fluid" style="margin-bottom: 70px; width:100%;">
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" id="forphone">
<a id="forphone2" href="javascript:void(0)" onclick="document.getElementById('popupBoxOnePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" id="forphone">
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxTwoPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxThreePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxFourPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="raw" style="margin-top: 70px;">
<div class="about_read_watch">
<span class="text4_span">
<input type="button" class="button" onclick="location.href='../contacts';" value="Contact Us"/>
</span>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="social">
<div class="footer-social-icons">
<ul class="social-icons">
<li><a target="_blank" href="https://www.facebook.com/Honey-Media-247807789328138/" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/company/11763547/" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/thehoney_media/" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UCQhsEwX6sxXnxt70pJXg1Rw/featured" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.menu_box');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.menu_box').css('background-color', '#f8f8f8');
$('.imglogo').css('width', '125px');
$('.imglogo').css('height', '47.625px');
$('.menu_box_ul a').css('font-size', '1.25rem');
$('.menu_box_logo').css('padding', '10px 10px 10px 10px');
$('.menu_box_ul').css('padding', '25px 0 10px 10px');
$('.menu_box_ul_more.show a').css('font-size', '1.75rem');
$('.menu_box_ul_more.show').css('padding-top', '80px');
} else {
$('.menu_box').css('background-color', 'transparent');
$('.imglogo').css('width', '250px');
$('.imglogo').css('height', '95.25px');
$('.menu_box_ul a').css('font-size', '1.75rem');
$('.menu_box_logo').css('padding', '20px');
$('.menu_box_ul').css('padding', '40px 0 20px 20px');
$('.menu_box_ul_more.show a').css('font-size', '2rem');
$('.menu_box_ul_more.show').css('padding-top', '110px');
}
});
});
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('popupBoxOnePosition');
var modal2 = document.getElementById('popupBoxTwoPosition');
var modal3 = document.getElementById('popupBoxThreePosition');
var modal4 = document.getElementById('popupBoxFourPosition');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
</html>

This will do the trick
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
This too
document.getElementById('some_frame_id').contentWindow.location.reload();
The second one will not work due to CORS in most cases.

You should do that by postMessage like the following:
$('.close-modal').click(function(){
$('.your-iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

Why can't I scroll on my webpage?

I am on a Chromebook and I can't scroll on my web page. I don't have any other device to test it on so maybe it's just the Chromebook. My code is below. Click the contact me button that's where the problem is. You might have to copy and paste the code in your editor because the preview on SO is small.
function contact_anim() {
$('#links-div').fadeOut('slow', function() {
$("#contact-form").fadeIn();
});
}
function cancel_contact_anim() {
$('#contact-form').fadeOut('slow', function() {
$('#links-div').fadeIn();
});
}
body {
background-image: url('amsterdam1920x1080.jpg');
background-size: auto;
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
color: white;
background-attachment: fixed;
}
#main {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(252, 0, 0, 0.67);
}
#links-div {
margin: 50px;
}
.links {
text-decoration: none;
color: white;
font-weight: bold;
border: 8px solid white;
padding: 13px;
font-size: 22px;
display: block;
border-radius: 50px;
width: 170px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
p {
font-size: 27px;
}
.links:hover {
background-color: white;
}
input[type="text"], #msg {
width: 50%;
margin: 15px;
height: 40px;
resize: none;
border: none;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
outline: none;
font-size: 20px;
}
#msg {
height: 225px;
}
#contact-form {
width: 50%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>j0rdan.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1>j0rdan.me</h1>
<p>This site is currently in the making, but<br>feel free to take a look around</p>
<div id="links-div">
ABOUT ME<br/><br/>
CONTACT ME<br/><br/>
MY PROJECTS<br/><br/>
</div>
<form id="contact-form" action="contact.php" method="post" style="display: none">
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="submit" id="send" name="send">Send</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="animation_handlers.js" charset="utf-8"></script>
</body>
</html>

You need to add overflow-y: scroll to your #main rule. The fixed position is making it non-scrollable:
function contact_anim() {
$('#links-div').fadeOut('slow', function() {
$("#contact-form").fadeIn();
});
}
function cancel_contact_anim() {
$('#contact-form').fadeOut('slow', function() {
$('#links-div').fadeIn();
});
}
body {
background-image: url('amsterdam1920x1080.jpg');
background-size: auto;
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
color: white;
background-attachment: fixed;
}
#main {
width: 100%;
height: 100%;
position: fixed;
overflow-y: scroll;
background-color: rgba(252, 0, 0, 0.67);
}
#links-div {
margin: 50px;
}
.links {
text-decoration: none;
color: white;
font-weight: bold;
border: 8px solid white;
padding: 13px;
font-size: 22px;
display: block;
border-radius: 50px;
width: 170px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
p {
font-size: 27px;
}
.links:hover {
background-color: white;
}
input[type="text"], #msg {
width: 50%;
margin: 15px;
height: 40px;
resize: none;
border: none;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
outline: none;
font-size: 20px;
}
#msg {
height: 225px;
}
#contact-form {
width: 50%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>j0rdan.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1>j0rdan.me</h1>
<p>This site is currently in the making, but<br>feel free to take a look around</p>
<div id="links-div">
ABOUT ME<br/><br/>
CONTACT ME<br/><br/>
MY PROJECTS<br/><br/>
</div>
<form id="contact-form" action="contact.php" method="post" style="display: none">
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="submit" id="send" name="send">Send</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="animation_handlers.js" charset="utf-8"></script>
</body>
</html>

Can't figure out how to make button be selected

I'm trying to make it so that you can select the buttons on my quiz but I can't figure out how. I have it set so the option to go to the next page is hidden until you select something, however, I've spent most of today trying to find a way to actually select one of the buttons. I have the hover and active events assigned in my css, but don't know what to do to actually make the button when pressed stay selected.
We aren't allowed to use external libraries like JQuery. Is angularJS considered an external library? May have to ask the professor that.
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body {
background-color: black;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650px;
650px;
position: relative overflow: hidden;
color: white;
background: black;
}
#myQuiz h1 {
font-weight: 100;
font-size 2em;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans- serif;
font-size: 3.2 em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #7E3517;
color: white;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .btn:hover {
background-color: white;
color: black;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .btn:active {
background-color: red;
color: black;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .progress {
width: 550px;
position: absolute;
top: 160px;
left: 40px;
}
#myQuiz .progress div {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
transition: background-color 1s;
}
#myQuiz .progress div.on,
#myQuiz .progress div.answered {
background-color: #ef0101;
}
#myQuiz .intro {
position: absolute;
top: 225px;
left: 50px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40px 0px;
}
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 50px;
}
#myQuiz .question .text {
font-size: 1.6em;
margin: 0px, 0px, 20px, 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid red;
border-radius: 6px;
padding 10px;
margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {
border-color: blue;
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(163, 111, 155, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
#myQuiz .done {
color: yellow;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .done .btn {
margin-top: 5px;
}
myQuiz .answered . done {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
#myQuiz .results {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
<div id="myQuiz">
<h1>Spirit Animal Quiz</h1>
<div class="progress">
<div class="on"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="question">
<form action="">
<p> <input type="radio" class="btn" value="male"> Rough<br></p>
<p><input type="radio" class="btn" value="female"> Soft<br></p>
<p> <input type="radio" class="btn" value="other"> both </p>
</form>
<p class="text">How would you describe your skin?</p>
<p class="btn">Rough</p>
<p class="btn">Smooth</p>
<p class="btn">Both</p>
<div class=d one>
<div class="btn">Next</div>
</div>
</div>
</div>

You can use the css property display to show and hide your next button.
use: display: none; to hide an element display: inline; to return to default
I gave the button and ID of "nxt" for easy access, and added event listeners to all of the buttons (because I don't know which one you want pressed before revealing next) With the onClick event you can do anything that should happen after the click in the callback function.
var btns = document.getElementsByClassName("btn");
for( var i =0; i < btns.length; i++){
btns[i].addEventListener("click", function(){
document.getElementById("nxt").style.display = "inline";
});
}
#nxt{
display: none;
}
#nxt, p.btn{
background-color: black;
color: white;
width : 150px;
height: 40px;
text-align: center;
}
<head>
<meta content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Find Out Your Spirit Animal</title>
<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div id= "myQuiz">
<h1>Spirit Animal Quiz</h1>
<div class = "progress">
<div class="on"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class = "question">
<form action="">
<p> <input type="radio" class= "btn" value="male"> Rough<br></p>
<p><input type="radio" class="btn" value="female"> Soft<br></p>
<p> <input type="radio" class="btn" value="other"> both </p>
</form>
<p class = "text">How would you describe your skin?</p>
<p class = "btn">Rough</p>
<p class = "btn">Smooth</p>
<p class = "btn">Both</p>
<div class = done>
<div class="btn" id="nxt">Next</div>
</div>
</div>
</div>
</body>

master page does not load css file

so i referenced css file in master page like this:
<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />
and it actually shows in visual studio in design view, but for some reason does not show in web browser. why is that? btw the css file and masterpage and the image folder are all in the root directory.
css file:
*
{
padding: 0em;
margin: 0em;
}
body
{
background:url('images/bg1.jpg');
padding: 30px 0px 35px 0px;
}
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}
a
{
color: #B96D00;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h3 span
{
font-weight: normal;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images/db1.gif');
}
h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images/db2.gif');
}
.contentarea
{
padding-top: 1.3em;
}
img
{
border: solid 1px #6F5230;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
.divider1
{
position: relative;
background: #fff url('images/border2.gif') repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}
.divider2
{
position: relative;
height: 1px;
border-bottom: solid 1px #eaeaea;
margin: 2.0em 0em 2.0em 0em;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}
.post ul.controls
{
clear: both;
}
.post ul.controls li
{
display: inline;
font-size: 0.8em;
}
.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}
.post ul.controls li a.printerfriendly
{
background-image: url('images/icon-printerfriendly.gif');
}
.post ul.controls li a.comments
{
background-image: url('images/icon-comments.gif');
}
.post ul.controls li a.more
{
background-image: url('images/icon-more.gif');
}
.box
{
position: relative;
background: #FDFCF6 url('images/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background: #fff url('images/bg2.jpg') repeat-x;
z-index: 1;
}
#outer
{
z-index: 2;
position: relative;
width: 82%;
border: solid 7px #fff;
background-color: #fff;
margin: 0 auto;
}
#header
{
position: relative;
width: 100%;
height: 8.0em;
background: #2B2B2B url('images/topbg.gif') repeat-x;
margin-bottom: 2px;
}
#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
#headercontent h1 sup
{
color: #777;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
#search
{
position: absolute;
top: 5.5em;
right: 2.0em;
padding-right: 0.0em;
}
#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}
#search input.submit
{
background: #939B00 url('images/buttonbg.gif') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}
#headerpic
{
position: relative;
height: 200px;
background: #fff url('images/hdrpic.jpg') no-repeat top left;
margin-bottom: 2px;
}
#menu
{
position: relative;
background: #7F8400 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}
#menu ul
{
position: absolute;
top: 1.1em;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover
{
text-decoration: underline;
}
#menu ul li a.active
{
background: #7F8400 url('images/menuactive.gif') repeat-x top left;
}
#menubottom
{
background: #fff url('images/border1.gif') repeat-x;
height: 14px;
margin-bottom: 1.5em;
}
#content
{
padding: 0em 2.0em 0em 2.0em;
}
#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}
#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}
#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Project3.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Zahra Moradi</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<div id="upbg">
</div>
<div id="outer">
<div id="header">
<div id="headercontent">
<h1>
E-Library</h1>
</div>
</div>
<form method="post" action="">
<div id="search">
<input type="text" class="text" maxlength="64" name="keywords" />
<input type="submit" class="submit" value="Search" />
</div>
</form>
<div id="headerpic">
</div>
<div id="menu">
<!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Library</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="menubottom">
</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<div class="left">
© 2015 Zahra Moradi. All rights reserved.</div>
<div class="right">
Design by NodeThirtyThree Design</div>
</div>
</div>
</form>
</body>
</html>
I've already tried other solutions posted on similar questions but didn't work for me. like adding runat="server" and so on...

Same suggestion as #Tyr. Try loading the CSS file as a web link instead of a local file. For example:
<link rel="stylesheet" type="text/css" href="https://example.com/website/css/default.css"/>
That should work. If it doesn't, use the developer tools on your browser (Google Chrome is the best). In Chrome, right click anywhere on the page and click 'Inspect Element'. Are there any errors coming up to do with your CSS file being displayed on the bar on the right? If there is, what are they?