Question

点击按钮，我的网页上会出现一个弹出窗口。我希望这个弹出窗口在点击按钮时从网页的顶部过渡到中心这可以用CSS完成吗？感谢。

Answer 1

HTML：

<div id="stage2">
    <div id="box1">#box1</div>
    <div id="box2">#box2</div>
</div>

的CSS：

#stage2 {
   position: relative;
   height: 500px;
   background: #efefef;
   text-align: right;
}
#box1 {
   position: absolute;
   width: 100px;
   height: 100px;
   border: 1px solid #666;
   background: red;
   color: #fff;
}
#box2 {
   position: absolute;
   left: 120px;
   top: 0;
   width: 100px;
   height: 100px;
   border: 1px solid #666;
   background: #00f;
   -webkit-transition: 1s all ease-in-out;
   -moz-transition: 1s all ease-in-out;
   -o-transition: 1s all ease-in-out;
   transition: 1s all ease-in-out;
   color: #fff;
}
#box1:hover + #box2 {
   top: calc(50% - 50px);
   background: yellow;
}

Answer 2

您不能仅使用CSS编辑警报框，因为它是系统对象。尝试使用customized div或JQuery UI或plugin。看到这个关于它的问题： how to change the style of alert box
使用自定义div非常简单：

<div id="cover"><div id="alert"><p>I am a alert!</p><button onclick="hide()">Ok</button></div>
</div>
    <button onclick="show()">Show alert</button>

CSS：

#cover{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background:rgba(0,0,0,0.5);
    z-index:999;
    display:none;
}
#alert{
    width:300px;
    height:200px;
    background:white;
    margin:200px auto;

}

JavaScript的：

function show(){
     document.getElementById('cover').style.cssText='display:block;';
}
function hide(){
     document.getElementById('cover').style.cssText='display:none;';
}

POP UP窗口来自顶部？

2 个答案: