1. 首页>>前端>>javascript

js 弹窗

<style type="text/css">
.tanchuang {
	/* display: none; */       /* 这个display:none要设置在html文档,不然会对页面造成第一次点击失败,需要点击二次才能显示隐藏div */
	position: fixed;          //定位
	top: 50%;                   
	left: 40%;
	background-color: red;
	margin-top: -200px;
	width: 300px;
	height: 300px;
}
.khbox {
	padding: 10px;
	background-color: #d5d5d5;
}

</style>
	
<script type="text/javascript">
	function divtc(){
		//获取ID名为tc01的标签 点击按钮把它的style样式改为隐藏
		if(document.getElementById("tc01").style.display=="none"){
			//获取ID名为tc01的标签 点击按钮把它的style样式改为显示
			document.getElementById("tc01").style.display="block";
		}else{
			document.getElementById('tc01').style.display='none';
		}
	}
</script>	
<a onclick="divtc()">立即咨询</a>

<!-- 弹窗 -->
<div class="tanchuang" id="tc01" style="display: none">
	<div class="khbox">
				
	</div>
</div>

效果:

弹窗

转载联系作者并注明出处:https://focusonseo.cn/jcczs/48.html