A Pen by GuoXi

Thumbnail
This awesome code was written by 1206189299, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1206189299 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  GuoXi</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<button type="button" class="display">display</button>
	<div  class="wrap">
		<div class="container">
			<div class="title">这是一个浮出层</div>
			<div class="body">
				<div class="text">手撸模态框</div>
				<div class="wrap-btn">
				<button type="button" class="confirm">确定</button>
				<button type="button" class="cancel">取消</button>
				</div>
			</div>
		</div>
	</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1206189299/a-pen-by-guoxi-WpMNGR */
	html,body{
		width: 100%;
		height: 100%;
	}
		button{
           height: 30px;
           width: 100px;
           border: solid 1px rgba(255,55,155,1);
           border-radius: 3px;
           background: rgba(147,147,255,.1);
		}
		.wrap{
			width: 100%;
			height: 100%;
			background:rgba(0,0,0,.3);
			position: fixed;
			top: 0;
			left: 0;
			display: none;
		}
		.container{
			width: 500px;
			height: 270px;
			background:white;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-90%);
			border-radius: 5px;
			opacity: 0;
		}
		@keyframes move{
             100%{
            opacity: 1;
         	transform: translate(-50%,-50%);
             }
		}
		.title{
			width: 100%;
			box-sizing: border-box;
			height: 50px;
			border-bottom: 1px solid rgb(147,147,147);
			padding:10px;
			line-height: 29px;
		}
		.text{
			height: 180px;
			box-sizing: border-box;
			padding: 10px;
		}
		.wrap-btn{
			padding: 5px 10px;
			border-top:solid 1px rgb(147,147,147);
		}
		.confirm{
             margin-left: 270px;
		}

/*Downloaded from https://www.codeseek.co/1206189299/a-pen-by-guoxi-WpMNGR */
		(function(){
           $ = function(selector){
               return document.querySelector(selector);
           };
           $(".display").onclick = function(){
		            $(".wrap").style.display = "block";
		            $(".container").style.cssText = "animation: move 2s;animation-fill-mode:forwards;";
           };
           $(".wrap").onclick = function(){
           	        $(".wrap").style.display = "none";
           };
           $(".container").onclick = function(e){
		           	if (e) {
		           		e.stopPropagation();
		           	}else if(window.event){
		           		window.event.cancelBubble=true;
		           	}
           };
           $(".cancel").onclick = function(){
                     $(".wrap").style.display = "none";
           };
		})();

Comments