Reputation: 19

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>

Upvotes: 0

Answers (3)

repzero

Reputation: 8402

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('testOverlay')[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>

This snippet is much more better

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

function show() {
  document.getElementsByClassName('test')[0].style.display = "block";
  document.getElementsByClassName('testOverlay')[0].style.display = "block";
}

document.getElementsByClassName('test_Close')[0].addEventListener('click', close);
document.getElementsByClassName('test_Button_0')[0].addEventListener('click', close)

document.getElementById("press").addEventListener('click', show)

.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 div {
  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 div {
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 0px 2px #222;
  padding: 10px 15px;
}
.test .test_Buttons div:hover {
  background: #224467;
  color: #FFF
}
.test div.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 div.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 .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 div {
  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 {
  zoom: 1;
  *display: inline;
}
.test {
  top: 0px !important;
  left: 0px !important;
}
.test,
.test_Close {
  display: inline-block;
}
.test:hover,
.test_Close:hover {
  cursor: pointer
}
.test,
.testOverlay {
  display: none;
}

<button id="press">
  Press
</button>
<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<div href="" class="test_Close" style="right: 15px; top: 9.5px;">×</div></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">
      <div class="test_Button_0">Ok</div>
    </div>
  </div>
</div>

Upvotes: 0

RPichioli

Reputation: 3345

Talking about pure Javascript, looks like you want something like this..

You can run it:

// Waiting DOM load
window.onload = function() {
  // Binding event click to the close button, and defining it's callback
  document.querySelector(".test_Close").addEventListener("click", function(e) {
    // Prevent the click in <a> to redirect the page to itself or another place
    e.preventDefault();
    // Closing the overlay
    document.querySelector(".testOverlay").style.display = "none";
    // Closing the modal
    document.querySelector(".test").style.display = "none";
    // Check your browser console with F12 or Ctrl + Shift + I
    console.info("Modal has been closed!");
  });
}

.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;">

  <!-- Have set void(0), that evaluates the given expression and then returns undefined -->
  <h3 class="test_Title">Information<a href="javascript:void(0)" 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>

Hope it helps you.

Upvotes: 0

Mark Adelsberger

Reputation: 45759

Perhaps it's counter-intuitive, but while in the UI you think of this as a "window" to be "closed", what you have is just a DIV like any other, but with special stylesheet settings to act like a window. So instead of worry about closing it, you just need to hide it when the user clicks the X or whatever.

(If you really want to, you could actually remove the DIV from the page's DOM, but I know of no reason to do that.)

How exactly to do that depends on some things - like jQuery or raw javascript, and does it matter whether the "closed window" would still occupy layout space. (You've shown a lot of css, so apologies but I don't have time just now to dig through it all and fully understand your layout.)

But hopefully it points you in the right direction to know that you need to get the element for the window's DIV ($(".testOverlay") if you're using jQuery) and then apply a style of either display: none or visibility:hidden

Upvotes: 1

How to make this close?

Answers (3)

Related Questions