html + css +js 简单的弹窗写法。

发表于 作者 jiukeshuju 
<style type="text/css">
	/* Popup container - can be anything you want */
	.popup {
	    position: relative;
	    display: inline-block;
	    cursor: pointer;
		
		/* 写以下CSS 可以使用户无法复制网页上的内容 */
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
		/* 不能选择网页上的文本。 */
	    user-select: none;
	}
	
	/* The actual popup */
	.popup .popuptext {
	    visibility: hidden;
	    width: 160px;
	    background-color: #555;
	    color: #fff;
	    text-align: center;
	    border-radius: 6px;
	    padding: 8px 0;
	    position: absolute;
	    z-index: 1;
	    bottom: 125%;
	    left: 50%;
	    margin-left: -80px;
	}
	
	/* Popup arrow */
	.popup .popuptext::after {
	    content: "";
	    position: absolute;
	    top: 100%;
	    left: 50%;
	    margin-left: -5px;
	    border-width: 5px;
	    border-style: solid;
	    border-color: #555 transparent transparent transparent;
	}
	
	/* Toggle this class - hide and show the popup */
	.popup .show {
	    visibility: visible;
	    -webkit-animation: fadeIn 1s;
	    animation: fadeIn 1s;
	}
	
	/* Add animation (fade in the popup) */
	@-webkit-keyframes fadeIn {
	    from {opacity: 0;} 
	    to {opacity: 1;}
	}
	
	@keyframes fadeIn {
	    from {opacity: 0;}
	    to {opacity:1 ;}
	}
</style>

<body style="text-align:center">

<h2>弹窗</h2>

<div class="popup" onclick="myFunction()">点我有弹窗!
  <span class="popuptext" id="myPopup">提示信息!</span>
</div>
</body>

<script>
	function myFunction() {
	    var popup = document.getElementById("myPopup");
		//该属性用于在元素中添加，移除及切换 CSS 类
	    popup.classList.toggle("show");
	}
</script>

发表评论