James Grant James Grant - 1 month ago 12
Javascript Question

How to make this close?

I made this window for my site but I'm horrible at Javascript and I don't know how I would make the window close when they click "Ok" or "x". Can you add some javascript to make it closeable? Here's my code:

https://jsfiddle.net/3eap0vus/



.test *,
.test *:after,
.test *:before { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important }

.test {
width: 350px;
z-index: 1001;
}

.test,
.test .test_Title,
.test .test_Body,
.test .test_Buttons a {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 14px;
text-align: left;
}

.test .test_Title,
.test .test_BodyOuter,
.test .test_ButtonsOuter {
border-color: #13252F;
border-width: 7px;
}

.test .test_Title {
font-size: 16px;
font-weight: bold;
color: #F6F5F5;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #444444;
padding: 12px 15px;
line-height: 1;
vertical-align: middle;
}

.test .test_BodyOuter {
background: #E7EDEF;
}

.test .test_Body {
color: #44484A;
padding: 20px;
border-top-color: #000;
border-bottom-color: #FFF;
}

.test .test_ButtonsOuter {
background: #E7EDEF;
padding: 10px 5px 10px 10px;
}

.test .test_Buttons:before,
.test .test_Buttons:after { content: "\0020"; display: block; height: 0; visibility: hidden; font-size: 0 }
.test .test_Buttons:after { clear: both }
.test .test_Buttons { *zoom: 1 }

.test .test_Buttons a {
font-weight: bold;
color: #FFF;
text-shadow: 1px 0px 2px #222;
padding: 10px 15px;
}

.test .test_Buttons a:hover {
background: #224467;
color: #FFF
}

.test a.test_Close {
position: absolute;
right: 6px;
top: 0px;
text-decoration: none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 21px;
color: #666
}

.test a.test_Close:hover {
}

.test .test_Title a.test_Close {
color: #E7EDEF;
}

.test .test_Title a.test_Close:hover {
}

.testOverlay {
background: #666;
z-index: 1000;
width: 100%;
height: 100%;
}

.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.test .test_Title {
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

.test .test_BodyOuter {
border-left-style: solid;
border-right-style: solid;
}

.test .test_NoTitle {
border-top-style: solid;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}

.test .test_NoButtons {
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}

.test .test_Body {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-style: groove;
overflow: auto;
}

.test .test_NoTitle .test_Body {
border-top: none;
}

.test .test_NoButtons .test_Body {
border-bottom: none;
}

.test .test_Icon {
background-repeat: no-repeat;
background-position: 20px 20px;
padding-left: 88px;
min-height: 48px;
_height: 85px;
}

.test .test_Confirmation { background-image: url('https://i.imgsafe.org/b792cc6d45.png') }
.test .test_Error { background-image: url('https://i.imgsafe.org/b78fb8bcdb.png') }
.test .test_Information { background-image: url('https://i.imgsafe.org/b79592c464.png') }
.test .test_Question { background-image: url('https://i.imgsafe.org/b797dc528f.png') }
.test .test_Warning { background-image: url('https://i.imgsafe.org/b79a3e68af.png') }

.test .test_ButtonsOuter {
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}

.test .test_Buttons a {
white-space: nowrap;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
display: inline-block;
margin-right: 5px;
min-width: 60px;
float: right;
_width: 60px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

background-color: #006DCC;
*background-color: #0044CC;
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(to bottom, #0088CC, #0044CC);
background-repeat: repeat-x;
border-color: #0044CC #0044CC #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.test .test_Buttons_Centered .test_Buttons {
display: table;
margin: 0 auto;
text-align: center;
}

.test .test_Buttons_Centered a {
zoom: 1;
*display: inline;
}

<div class="testOverlay" style="position: fixed; left: 0px; top: 0px; opacity: 0.9;"></div><div class="test" style="position: fixed; left: 433px; top: 223px; visibility: visible; width: 500px; opacity: 1;"><h3 class="test_Title">Information<a href="" class="test_Close" style="right: 15px; top: 9.5px;">×</a></h3><div class="test_BodyOuter"><div class="test_Body test_Icon test_Information"><div style="padding-top: 14px;"><strong>Test<br></strong></div></div></div><div class="test_ButtonsOuter"><div class="test_Buttons"><a href="" class="test_Button_0">Ok</a></div></div></div>




Answer

I added css

.test{
top:0px !important;
left:0px !important;
}

So that the window can show in properly. You can take this out if needed

see snippet

function close() {
  document.getElementsByClassName('test')[0].style.display = "none";
}

document.getElementsByClassName('test_Close')[0].addEventListener('click', close)
document.getElementsByClassName(test_Button_0 ')[0].addEventListener('
    click ',close)
.test *,
.test *:after,
.test *:before {
  -moz-box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  box-sizing: content-box !important
}
.test {
  width: 350px;
  z-index: 1001;
}
.test,
.test .test_Title,
.test .test_Body,
.test .test_Buttons a {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Tahoma, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
}
.test .test_Title,
.test .test_BodyOuter,
.test .test_ButtonsOuter {
  border-color: #13252F;
  border-width: 7px;
}
.test .test_Title {
  font-size: 16px;
  font-weight: bold;
  color: #F6F5F5;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #444444;
  padding: 12px 15px;
  line-height: 1;
  vertical-align: middle;
}
.test .test_BodyOuter {
  background: #E7EDEF;
}
.test .test_Body {
  color: #44484A;
  padding: 20px;
  border-top-color: #000;
  border-bottom-color: #FFF;
}
.test .test_ButtonsOuter {
  background: #E7EDEF;
  padding: 10px 5px 10px 10px;
}
.test .test_Buttons:before,
.test .test_Buttons:after {
  content: "\0020";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0
}
.test .test_Buttons:after {
  clear: both
}
.test .test_Buttons {
  *zoom: 1
}
.test .test_Buttons a {
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 0px 2px #222;
  padding: 10px 15px;
}
.test .test_Buttons a:hover {
  background: #224467;
  color: #FFF
}
.test a.test_Close {
  position: absolute;
  right: 6px;
  top: 0px;
  text-decoration: none;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 21px;
  color: #666
}
.test a.test_Close:hover {} .test .test_Title a.test_Close {
  color: #E7EDEF;
}
.test .test_Title a.test_Close:hover {} .testOverlay {
  background: #666;
  z-index: 1000;
  width: 100%;
  height: 100%;
}
.test {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.test .test_Title {
  border-left-style: solid;
  border-top-style: solid;
  border-right-style: solid;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.test .test_BodyOuter {
  border-left-style: solid;
  border-right-style: solid;
}
.test .test_NoTitle {
  border-top-style: solid;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}
.test .test_NoButtons {
  border-bottom-style: solid;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.test .test_Body {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: groove;
  overflow: auto;
}
.test .test_NoTitle .test_Body {
  border-top: none;
}
.test .test_NoButtons .test_Body {
  border-bottom: none;
}
.test .test_Icon {
  background-repeat: no-repeat;
  background-position: 20px 20px;
  padding-left: 88px;
  min-height: 48px;
  _height: 85px;
}
.test .test_Confirmation {
  background-image: url('https://i.imgsafe.org/b792cc6d45.png')
}
.test .test_Error {
  background-image: url('https://i.imgsafe.org/b78fb8bcdb.png')
}
.test .test_Information {
  background-image: url('https://i.imgsafe.org/b79592c464.png')
}
.test .test_Question {
  background-image: url('https://i.imgsafe.org/b797dc528f.png')
}
.test .test_Warning {
  background-image: url('https://i.imgsafe.org/b79a3e68af.png')
}
.test .test_ButtonsOuter {
  border-left-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.test .test_Buttons a {
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  display: inline-block;
  margin-right: 5px;
  min-width: 60px;
  float: right;
  _width: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #006DCC;
  *background-color: #0044CC;
  background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC));
  background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
  background-image: -o-linear-gradient(top, #0088CC, #0044CC);
  background-image: linear-gradient(to bottom, #0088CC, #0044CC);
  background-repeat: repeat-x;
  border-color: #0044CC #0044CC #002A80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}
.test .test_Buttons_Centered .test_Buttons {
  display: table;
  margin: 0 auto;
  text-align: center;
}
.test .test_Buttons_Centered a {
  zoom: 1;
  *display: inline;
}
.test {
  top: 0px !important;
  left: 0px !important;
}
<div class="testOverlay" style="position: fixed; left: 0px; top: 0px; opacity: 0.9;"></div>
<div class="test" style="position: fixed; left: 433px; top: 223px; visibility: visible; width: 500px; opacity: 1;">
  <h3 class="test_Title">Information<a href="" class="test_Close" style="right: 15px; top: 9.5px;">×</a></h3>
  <div class="test_BodyOuter">
    <div class="test_Body test_Icon test_Information">
      <div style="padding-top: 14px;"><strong>Test<br></strong>
      </div>
    </div>
  </div>
  <div class="test_ButtonsOuter">
    <div class="test_Buttons"><a href="" class="test_Button_0">Ok</a>
    </div>
  </div>
</div>