<!DOCTYPE HTML PUBLIC ""> <%@ page contentType="text/html; charset=UTF-8"%> <html> <head> <title>Web</title> <style type="text/css"> * { font-size: 13px; } .datagrid-toolbar { background: none; } input { padding: 3px 0 3px 0; } .easyui-combobox { height: 24px; } .combo-arrow { height: 24px; } .combo-text { height: 24px; } #operate-action { margin-top: 20px; padding: 10px 30px; border-top: 1px solid #CCCCCC; background: #EFEFEF; } #operate-action a { color: #2274ac; text-decoration: none; } #operate-action a:focus { color: #2274ac; text-decoration: none; } #operate-action a:active { color: #2274ac; text-decoration: none; } #operate-action a:hover { color: #FF762C; text-decoration: underline; } #operate-action a { margin-left: 20px; } .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity = 80); } .white_content { display: none; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border: 8px solid lightblue; background-color: white; z-index: 1002; overflow: auto; } .white_content_small { display: none; position: absolute; top: 20%; left: 30%; width: 40%; height: 50%; border: 8px solid lightblue; background-color: white; z-index: 1002; overflow: auto; } </style> </head> <body> <table id="datagrid" class="easyui-datagrid" style="width: 100%; height: 100%" data-options="width:800,height:500,idField:'keyid',toolbar:'#tb', iconCls:'icon-tip',striped: true,fitColumns:true,singleSelect:true, maximized:true,remoteSort: false,rownumbers:true"></table> <div id="tb" style="height: auto"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="getServiceLs()">刷新</a> <a id="openDiv" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="jqueryOpenDiv()">弹出DIV</a> </div> <div id="MyDiv" class="white_content"> <div style="text-align: right; cursor: default; height: 40px;"> <span style="font-size: 16px;" onclick="jqueryCloseDiv()">关闭</span> </div> 目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。<button id="testButton">点击Button</button> </div> <script type="text/javascript" src="<%=request.getContextPath()%>/pages/serverlist.js"></script> </body> </html>
function jqueryOpenDiv() { var left = $("#openDiv").offset().left; alert(left); var top = $("#openDiv").offset().top; alert(top); var positionX = left; var positionY = top; var myOffset = new Object(); myOffset.left = positionX; myOffset.top = positionY; //$("#MyDiv").offset(myOffset); $("#MyDiv").css({position: "absolute",'top':top+30,'left':left,'z-index':2}); $("#MyDiv").width(500); $("#MyDiv").height(100); var div1 = $('#MyDiv').show(); } function jqueryCloseDiv() { $('#MyDiv').hide(); }; $("#testButton").click(function(){ alert("点击Button!"); }); // 弹出隐藏层 function ShowDiv(show_div, bg_div) { document.getElementById(show_div).style.display = 'block'; document.getElementById(bg_div).style.display = 'block'; var bgdiv = document.getElementById(bg_div); bgdiv.style.width = document.body.scrollWidth; // bgdiv.style.height = $(document).height(); alert($(document).height()); $("#" + bg_div).height($(document).height()); }; // 关闭弹出层 function CloseDiv(show_div, bg_div) { document.getElementById(show_div).style.display = 'none'; document.getElementById(bg_div).style.display = 'none'; };
相关推荐
完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面
jquery弹出可拖拽的div,组件式使用,使用的时候图片需要自己替换
jquery js div 弹出
带关闭按钮jquery+div消息弹出层代码例子
鼠标悬停在按钮上弹出DIV层页面,可以点击页面上的链接什么的,鼠标离开后层消失,完美的jquery实例效果,当当网门户效果展示!
在之前做项目的时候经常会在主页面上点击某个按钮,右侧弹出一个div输出对应内容的详细信息,怎么实现的呢,今天小编给大家分享通过jquery实现点击任意位置弹出层外关闭弹出层效果,感兴趣的朋友一起看看吧
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至:maxcoold@126.com --------------------------------------------- 功能说明: 本插件基于jquery 1.31下编写,请尽量在...
3种效果完成div(模态层)的弹出 背景黑色透视 效果很平滑
我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就“负责”使页面变灰。点击关闭后,删除这个层就能使页面恢复原样。不知道有没有更好的方法,有的话请告诉我哦。 其他应该没什么问
jQuery PopupLayer是一款可以方便的从不同的方向弹出自定义的弹层jQuery插件。
用jquery插件完成点击按钮弹出子窗口。
JQuery 弹出层插件 PopupDiv-v1.0,弹出后可自动居中,可自定义标题栏和关闭按钮,支持半透明状态,支持鼠标拖动,支持自定义弹出样式,支持ajax加载页面到弹出层,带遮罩层,设计美观,调用简单,使用方便。...
jquery实现从屏幕上方滑动显示div。上传只为分享
主要介绍了jQuery实现点击按钮弹出可关闭层的浮动层插件,具有点击弹出带有遮罩层的浮动层效果,且浮动层可拖动、可关闭,需要的朋友可以参考下
下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单、删除表单、发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效。 效果图展示如下: 在线预览 源码下载 html代码: <div ...
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
按钮点击,弹出提示层,提示层在几秒后自动消失,用于按钮点击事件的提醒
10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑菜单效果 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色...
摘要:脚本资源,jQuery,拖曳布局 jQuery拖拽布局插件,我觉得挺实用,...拖动演示网页中的各个模块,可以自动变化位置,上边的按钮可以弹出一个浮动层,每一个Div模块可以最大化或最小化。 运行环境:HTML/PHP/ASP/
纯div+css+jquery制作,大家可以收藏下.