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
jquery 弹出框效果
原文地址：http://www.cnblogs.com/guangzhou11/p/7583152.html