<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="ww" uri="webwork" %>
<%
String path = request.getContextPath();
%>
<html>
<head>
<link href="<%=path%>/framework/resources/sinks/default/css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=path%>/framework/resources/common/js/querytable.js"></script>
<script type="text/javascript" src="<%=path%>/framework/resources/common/js/util/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[name='showmsg']").click(function(e){
var x = e.clientX+20;
var y = e.clientY+20;
$("#showDiv").css({"zIndex":90000,"position":"absolute","top":y,"left":x,"display":""});
});
});
</script>
<script type="text/javascript">
function divTest(id)
{
//load
document.getElementById('showDiv').innerHTML='';
$('#showDiv').ajaxStart(function(){$("#showDiv").html("正在加载请稍后...")});
$("#showDiv").load('<%=path %>/test/testDiv.action',{'args':id},callback);
function callback(date){
//alert(date)
}
}
// close
function closeDiv(){
$("#showDiv").html("");
$("#showDiv").css({display:"none"});
}
</script>
</head>
<body>
<form action="#" method="post" id="frm" name="frm">
<a href="#" name="showmsg" onclick="divTest('21')">demo</a>
<div id="showDiv" style="width:20%;display:none;background:#DBEAF5;border-style:outset; border-width:1px;"></div>
</form>
</body>
</html>
/**
* @author . 程仁银
* @email . 13813375172@139.com
* @createTime .Jul 27, 2010 10:09:01 AM
* @parameters . args by id
* @description .to test div show type
*/
public String testDiv()
{
String id = this.getRequest().getParameter("args");
try {
this.getResponse().setCharacterEncoding("utf-8");
PrintWriter out = getResponse().getWriter();
out.print("<table style=\"width:100%\">");
if(this.testService.getById(MeetMenu.class,Long.parseLong(id)) != null)
{
MeetMenu mm = this.testService.getById(MeetMenu.class,Long.parseLong(id));
out.print("<tr><td style=\"width:20%\">col1：</td><td style=\"width:80%\">" + mm.getMenuName()+ "</td></tr>");
out.print("<tr><td>col2：</td><td>" +mm.getMenuText()+ "</td></tr>");
}else
{
out.print("<tr><td>数据读取出错！请重新再试</td></tr>");
}
out.print("<tr><td><input type=\"button\" name=\"but\" value=\"关闭\" id=\"but\" onclick=\"closeDiv()\" /> </td></tr>");
out.print("</table>");
out.flush();
out.close();
} catch (NumberFormatException e) {
e.printStackTrace();
} catch (BOException e) {
e.printStackTrace();
}catch (Exception e) {
// TODO: handle exception
}
return "";
}
分享到：
相关推荐
在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
总结起来，这个例子展示了如何利用HTML的`div`元素，配合JavaScript和CSS，实现一个基本的弹出层功能。通过`index.html`的结构，`popup.js`和`openDivWindow.js`的JavaScript逻辑，以及适当的CSS样式，我们可以创建...
这个例子展示了如何利用jQuery和HTML/CSS创建一个具有关闭功能的消息弹出层。在实际项目中，这个功能可以进一步扩展，例如添加动画效果、调整弹出层的位置或者使其适应不同的屏幕尺寸。通过不断学习和实践，开发者...
弹出层通常通过JavaScript或jQuery库实现，例如使用`show()`和`hide()`方法来控制`div`的可见性。在ASP.NET中，我们可以通过结合服务器端代码和客户端脚本来实现这一功能。当用户触发某个事件（如点击按钮或链接）时...
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中，我们将探讨如何利用JavaScript来创建一个可拖动的弹出层，并控制其显示与隐藏。 首先，让我们理解`div`层的隐藏与显示。在HTML中，我们创建一个`div`元素并为其...
弹出Div层 不遮罩 可拖移的div层 用于Asp.net 是一个很好的例子
在本文中，我们将深入探讨如何在layui框架中利用弹出层（layer）进行回调操作，以便获取弹出层内的数据。layui是一个轻量级、模块化的前端UI框架，提供了丰富的组件，包括弹出层功能，使得用户交互变得更加便捷。在...
在JavaScript中，弹出层通常指的是通过编程方式在网页上动态创建或显示一个浮动的div元素，用于展示信息、提示用户或收集用户输入。这种技术广泛应用于网页交互设计，尤其在不需要新窗口或完全刷新页面的情况下。在...
在这个例子中，`#open_popup`是触发弹出层显示的按钮，而`#close_popup`则是关闭弹出层的按钮。 4. **动画效果**：jQuery提供了丰富的动画效果，如淡入淡出(`fadeIn/fadeOut`)、滑动(`slideToggle`)等，可以添加到...
3. **自适应布局**：弹出层内容可能包含不同尺寸的元素，可以使用CSS的`max-width`和媒体查询来确保其在不同屏幕尺寸下的良好展示。 4. **焦点管理**：确保弹出层打开时，第一个可交互元素自动获得焦点，关闭时焦点...
以上代码展示了如何使用jQuery创建一个基本的登录弹出层。当然，实际应用中可能需要添加更多的功能，如表单验证、AJAX登录请求等。这个例子仅作为一个起点，你可以根据项目需求进行扩展和优化。记住，良好的代码组织...
这里我们关注的是一个包含`jquery.DOMWindow`脚本的弹出层例子。`jQuery`是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务。`DOMWindow`则是基于jQuery的一个插件，用于创建可定制的弹出...
在Web开发中，弹出层是一种常见的交互元素，它能够以非侵入式的方式向用户展示信息，如警告、提示、表单或详细内容。jQuery库以其简洁的API和强大的功能，使得创建弹出层变得非常容易。本篇文章将深入探讨如何使用...
在JavaScript中，实现一个div弹出层是一项常见的任务，特别是在构建交互式Web应用时。本篇将详细解析如何使用原生JavaScript来创建一个功能完备的div弹出层，包括使其可拖拽、可关闭，并允许用户自定义显示效果。 ...
本文将深入探讨如何使用jQuery实现一个弹出层（popup）功能，使得弹...通过理解这个例子，开发者可以进一步掌握jQuery事件处理、DOM操作以及CSS定位等技术，从而在实际项目中构建更复杂、更符合用户体验的弹出层功能。
在这个例子中，`#openPopup`是触发弹出层的按钮，而`.close`则是用于关闭弹出层的元素。当用户点击按钮时，`show`类被添加到弹出层上，从而启动CSS动画并显示弹出层；点击关闭按钮时，`show`类被移除，弹出层随之...
对于弹出层，通常是一个具有`position: fixed`属性的div元素，它会在页面上浮动，遮盖住其他内容。 要实现“弹出层不关闭，父页面刷新”的功能，我们需要监听用户的刷新事件。在JavaScript中，可以使用`window....
在这个"两个js弹出div层并获取当前页面值的html例子"中，我们可以学习如何利用JavaScript动态创建和控制div元素来实现弹出层，并且获取当前页面的值。 首先，我们先理解HTML中的div元素。div是HTML中的一个块级元素...