废话少说,先上效果图
一、普通弹窗(无动画):
普通弹窗代码(注:此代码复制粘贴可用,但是并不规范,仅做原理演示):
<button onclick="Show()">点我</button>
<div id="modal" style="width:30%;background-color:rgba(0,0,0,.2);display: none;">
<input type="password" style="width:95%;margin:2%"/>
<p style="text-align:center;">
<button>确定</button>
<button onclick="Hide()">取消</button>
</p>
</div>
<script>
function Show(){document.getElementById('modal').style.display = "";}
function Hide(){document.getElementById('modal').style.display = "none";}
</script>
接下来,改一下,加5行代码实现展开时伸开,隐藏时收缩的炫酷过渡动画↓
二、高级弹窗(有动画):
高级弹窗代码(注:此代码复制粘贴可用,但是并不规范,仅做原理演示):
<button onclick="Show()">点我</button>
<div id="modal" style="height:0;width:0;background-color:#333333;transition: all 1s;overflow:hidden">
<input type="password" style="width:95%;margin:2%"/>
<p style="text-align:center;">
<button onclick="Hide()">确定</button> <button onclick="Hide()">取消</button>
</p>
</div>
<script>
function Show(){
document.getElementById('modal').style.height = "100px";
document.getElementById('modal').style.width = "300px";
}
function Hide(){
document.getElementById('modal').style.height = "0";
document.getElementById('modal').style.width = "0";
}
</script>
如果我的文章对您有帮助,就请客官给个赞吧