jquery 弹出框效果

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>弹出框效果</title>
		<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
		<script type="text/javascript" src="js/test.js" ></script>
		<style>
body { font-size:12px; padding:100px; }


.box { float:left; padding:5px; background:#eee; position:absolute; top:20%; left:25%;
        border-radius: 20px;
}

.box1 { width:500px; border:1px solid #4c7ebd;display:none;  border-radius: 20px; }

.box1 h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; }

.box1 span { float:right; padding-right:10px; cursor:pointer;}

.box1 span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; text-indent:-9999px;}

.box1 span a:hover { background:url(img/close_hover.jpg) no-repeat;}

.box1 p { padding:10px; height:300px; background:#fff; border:3px solid #eee;text-align:center; }

.one { display:block;background-color: azure;width:50px;color: black;}


		</style>
	</head>
	<body>
		<input type=" submit" class="one" value="弹出框">
		
		<div class="box">
			<div class="box1">
				<h1><span><a href="#">关闭</a></span>这是标题</h1>
				<p>这是内容</p>
			</div>
		</div>
	</body>
</html>

　　js

$(document).ready(function(){

	$('.one').click(function(){
		
		$('.box1').show();
		
		
		});
		
		
	$('span').click(function(){
		
		
		$('.box1').hide();
		
		
		});





	$('.box').easydrag();
		
	
	});

　　效果：

 

 

  2017-09-23   22:10:02

posted @ 2017-09-23 22:11  1点  阅读(195)  评论(0)  编辑  收藏  举报