12行代码 超级简单 web浏览器html实现可输入，带按钮的弹窗

废话少说，先上效果图

一、普通弹窗(无动画)：

 

普通弹窗代码(注：此代码复制粘贴可用，但是并不规范，仅做原理演示)：

<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>

 

如果我的文章对您有帮助，就请客官给个赞吧

THE END!