天易13-jquery兑现简单的可拖动的弹出层效果
天易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>