Блог

Главная - Вопросы по программированию - Как сделать это закрытым?

Как сделать это закрытым?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создал это окно для своего сайта, но я ужасен в Javascript, и я не знаю, как я могу заставить окно закрываться, когда они нажимают «Ok» или «x». Можете ли вы добавить какой-нибудь javascript, чтобы сделать его закрываемым? Вот мой код:

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: "020"; 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>

Комментарии:

1. Вы хотите удалить это по щелчку или скрыть?

2. @ZeevKatz Я хочу, чтобы окно было скрыто, когда пользователь нажимает «Ok» или «x», и если вас не затруднит спросить, можете ли вы сделать так, чтобы при нажатии «Ok» или «x» пользователь не видел его при перезагрузке

3. Если вы вообще не знаете js и php, это сама проблема для объяснения. Я напишу для вас простой пример и попробую его использовать.

4. Я вроде как знаю php, но я новичок в этом

5. Своим вопросом вы просите кого-то сделать вашу работу за вас. Вы не показываете никаких попыток самостоятельно устранить проблему. Если вы пытались сделать это закрытым с помощью javascript, сначала покажите, что вы пробовали и что пошло не так. Если вы вообще не знаете, как программировать JS, выполните поиск в Google. Например, быстрый поиск в Google выдал такой результат: w3schools.com/jsref/prop_style_visibility.asp

Ответ №1:

Возможно, это противоречит интуиции, но хотя в пользовательском интерфейсе вы думаете об этом как о «окне», которое нужно «закрыть», у вас есть просто DIV, подобный любому другому, но со специальными настройками таблицы стилей, которые действуют как окно. Поэтому вместо того, чтобы беспокоиться о его закрытии, вам просто нужно скрыть его, когда пользователь нажимает на крестик или что-то еще.

(Если вы действительно хотите, вы могли бы фактически удалить DIV из DOM страницы, но я не знаю причин для этого.)

Как именно это сделать, зависит от некоторых вещей — таких как jQuery или raw javascript, и имеет ли значение, будет ли «закрытое окно» по-прежнему занимать пространство макета. (Вы показали много css, поэтому прошу прощения, но у меня сейчас нет времени копаться во всем этом и полностью понимать ваш макет.)

Но, надеюсь, это укажет вам правильное направление, чтобы знать, что вам нужно получить элемент для DIV окна ($ («.testOverlay»), если вы используете jQuery), а затем применить стиль либо display: none , либо visibility:hidden

Ответ №2:

Я добавил css

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

Чтобы окно могло отображаться должным образом. Вы можете удалить это, если это необходимо

смотрите фрагмент 

 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: "020";
  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>

Этот фрагмент намного лучше

 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: "020";
  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>

Комментарии:

1. Очень полезно! Спасибо, но один вопрос. Появится ли окно, если пользователь перезагрузит страницу?

2. Да, если страница перезагружается, все перезагружается вместе с ней …. также я просто установил для свойства display значение none , поэтому поле скрыто

3. Вы имеете в виду нажатие перезагрузки страницы?

4. Можете ли вы сделать так, чтобы при перезагрузке, когда пользователь нажимает «Ok» или «x», пользователь не мог этого видеть? Я сожалею, если прошу слишком многого

5. Вы хотели бы скрывать это каждый раз, когда загружается окно, и когда вы нажимаете кнопку или что-то еще, что оно показывает?

Ответ №3:

Говоря о чистом Javascript, похоже, вы хотите что-то вроде этого..

Вы можете запустить его:

 // 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: "020";
  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>

Надеюсь, это поможет вам.