如何使这个结束？

时间：2016-10-22 14:54:37

标签： javascript html css

我为我的网站创建了这个窗口，但是我对Javascript很恐怖，而且我不知道如果他们点击“＃34; Ok＆＃34;或＆＃34; x＆＃34;。你能添加一些javascript来使它可以关闭吗？这是我的代码：

https://jsfiddle.net/3eap0vus/

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

也许这是违反直觉的，但在用户界面中，你会认为这是一个＆＃34;窗口＆＃34;要关闭＆＃34;你拥有的只是一个像其他任何东西一样的DIV，但是有一个特殊的样式表设置就像一个窗口。因此，不必担心关闭它，只需在用户单击X或其他任何内容时隐藏它。

（如果真的想要，你实际上可以从网页的DOM中删除DIV，但我知道没有理由这样做。）

究竟如何做到这一点取决于一些事情 - 比如jQuery或原始javascript，并且＆＃34;关闭窗口＆＃34;是否重要？仍然会占用布局空间。 （你已经展示了很多css，所以道歉，但我现在没有时间深入挖掘所有内容并完全理解你的布局。）

但是，如果您正在使用jQuery，那么希望它指出您正确的方向知道您需要获取窗口的DIV元素（$（＆＃34; .testOverlay＆＃34;） ）然后应用display: none或visibility:hidden

的样式

答案 1 :(得分：0)

我添加了css 

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

这样窗口就可以正常显示。如果需要，你可以把它拿出来

请参阅代码段

＆＃13;
＆＃13; 
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)
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

此代码段更好

＆＃13;
＆＃13; 
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)
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

谈论纯粹的Javascript，看起来你想要这样的东西..

你可以运行它：

＆＃13;
＆＃13; 
// 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!");
  });
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望它对你有所帮助。

相关问题
最新问题