<!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';
};
分享到：
相关推荐
本项目“jQuery点击按钮弹出窗口动画特效”是利用jQuery的特性和功能来实现的一种用户界面交互效果。当你在网页上点击一个按钮时，它会触发一个动态的弹出窗口，为用户提供信息或进行互动。 首先，我们来深入理解...
<title>jQuery点击图标按钮弹出表单 <div class="container"> <button id="open-form" class="icon-btn"><i class="fa fa-plus"></i></button> ;"> 姓名：</label><input type="text" id="name" name="name...
"Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框（通常称为弹出窗口或浮层），在网页上显示额外的信息或者进行一些用户交互。模态对话框通常是网页中的一个浮动元素，可以覆盖页面的其他部分，直到用户...
在这个场景中，我们关注的是如何使用jQuery结合magnific-popup插件来实现一个弹出Div模式窗口的功能。 `jquery.magnific-popup.js`是magnific popup插件的核心脚本，它提供了一种优雅的方式来创建各种类型的弹出...
标题中的“左侧隐藏div，点击按钮弹出”是一种常见的网页交互设计，主要涉及到HTML、CSS以及JavaScript技术。这种设计常用于创建例如侧边栏、菜单或者提示框等元素，通过初始隐藏的方式节省页面空间，当用户触发特定...
- 可能还包含了如何关闭弹出层的代码，例如，通过再次点击或点击指定按钮来隐藏弹出层。 学习和理解这些代码，开发者可以灵活地在自己的项目中实现各种自定义的弹出效果，增强网页的交互性和吸引力。此外，还可以...
在jQuery中实现弹出模式的DIV，通常会结合CSS来定义样式和布局，使对话框看起来更加专业且符合用户体验。 首先，我们需要创建一个HTML结构，包含隐藏的模态对话框（DIV）。这个隐藏的DIV包含了对话框的内容，通过...
4. 用户交互：为了提升用户体验，弹出div通常会包含关闭按钮或者背景点击关闭功能。这需要添加相应的事件监听器，并在触发时调用隐藏div的方法。 5. 可重用性：作为插件，其设计应当考虑通用性和可配置性，允许...
总之，jQuery提供了一种简单有效的方式来实现按钮触发弹出式表单的功能，这在Web应用中非常常见，特别是在需要用户输入或进行特定操作的场景下。通过学习和掌握这一技术，你可以提升网站的交互性和用户体验。
本文将详细讲解如何使用jQuery实现一个点击按钮弹出对话框窗口提示的插件，以便用户在执行关键操作前进行确认或取消。 首先，我们需要引入jQuery库。在`index.html`文件中，添加以下代码片段来引入jQuery： ```...
本知识点主要关注如何使用jQuery实现一个可拖拽的弹出DIV组件，该组件适用于创建可交互的对话框或者浮动窗口。描述中提到，这个组件是组件化的，意味着它可以方便地被复用和定制，而图片需要自行替换，这意味着组件...
本篇文章将深入探讨一个基于jQuery的插件，标题为"jQuery插件集之(弹出div2)+Demo"，该插件主要用于在页面上弹出一个div元素，而非传统的模态窗口，提供了一种轻量级且灵活的替代方案。 首先，让我们了解为什么...
在这个“jquery弹出div”的主题中，我们将深入探讨如何利用jQuery来实现一个div元素的弹出效果，这通常用于创建对话框、提示框或者模态窗口。 首先，`div`在HTML中是一个通用的容器元素，用于组织页面内容。我们...
"jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框，通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...
在这个特定的场景中，我们看到的标题 "点击按钮弹出DIV，可以拖动，操作方便！" 描述了一个交互式的网页功能，用户可以通过点击按钮来显示一个可拖动的 `div` 对象。 首先，我们需要理解这个功能的核心组成部分： ...
而使用jQuery实现的点击按钮弹出侧边导航栏是一种常见且实用的交互设计，尤其适用于响应式布局，使得移动端用户体验更加友好。在这个项目中，我们将探讨如何通过jQuery实现这一功能。 首先，我们需要理解jQuery的...
完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面
在ASP.NET开发中，"NET弹出层弹出div"是一种常见的交互设计，它允许用户在不离开当前页面的情况下与一些额外的信息或功能进行交互。弹出层通常用于显示详细信息、表单输入、警告消息等，提高了用户体验，因为它们不...
在这里，div被用作弹出层的基础结构，可以包含消息文本和关闭按钮。通过CSS，我们可以对这个div进行样式设置，如大小、颜色、位置等，以满足设计需求。 关闭按钮是用户体验的关键部分，它提供了一种直观的方式来...
2. **事件绑定**：使用`.click()`、`.hover()`等方法为触发弹出div的行为绑定事件，如点击按钮或链接。 3. **动态显示**：当事件触发时，使用相应的jQuery方法改变div的可见性。 其次，**div的拖动功能**可以通过...