天易13----jquery实现简单的可拖动的弹出层效果
一：图片预览
1）层默认是隐藏的，当点击“点击”按钮时会出现效果
2）在此之前分别倒入jquery-1.4.4.min.js和jquery.easydrag.handler.beta2.js（用于拖动层）两个文件
3）图片：
二：代码片段：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="<%=basePath %>js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="<%=basePath %>js/jquery.easydrag.handler.beta2.js"></script><script type="text/javascript">$(document).ready(function(){$('input:button:[id="bt"]').click(function(){//alert("弹出对话框！");//$('.box').show();//展现层$('div:[id="box"]').show();});//隐藏层$('span').click(function(){$('div:[id="box"]').hide();});$('.box').easydrag();});</script> <style type="text/css">*{padding:0;margin:0;}body {font-size:12px;padding:100px;}.box_all{float:left;padding:5px;background:#eee;postion:absolute;top:20%;left:20%;display:none;}.box {width:300px;height:300px;border:1px solid #4c7ebd;display:none;}.box h1 {height:30px;line-height:30px;font-size:12px;background:#87b0e1;padding-left:10px;color:#fff}.box h1 span {float:right;padding-right:10px;cursor:pointer;}.box p {padding:10px;height:300px;backgound:#fff;border:3px solid #eee;}</style> </head> <body> <input type="button" id="bt" value="点击"> <div class="box" id="box"> <h1><span>关闭</span>这是标题</h1> <p>这是内容</p> </div> </body></html>