思路如下：
使用panel的onOpen事件，取得diglog的原始left和top当用户在拖动dialog过程中，使用panel的onMove事件取得dialog所在父页面body的width和height，通过计算，当用户将diglog拖动出body时，使用panel的move函数将dialog移动到初始的位置。
示例Demo:
本示例定义一个函数，传入文件夹和图片名称通过dialog框显示图片.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Open Dialog</title>
<link rel="stylesheet" href="jquery/themes/default/easyui.css" type="text/css" >
<link rel="stylesheet" href="jquery/themes/icon.css" type="text/css" >
<script type="text/javascript" src="jquery/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery/locale/easyui-lang-zh_CN.js" charset="UTF-8"></script>
<script type="text/javascript">
//本示例定义一个函数，传入文件夹和图片名称通过dialog框显示图片
function showImagePreview(fileName,imageName){
// 用于Linux下服务器显示图片
//var scheme = '<%=request.getScheme() %>';
//var serverName = '<%=request.getServerName() %>';
//var tempPath = scheme+"://"+serverName;
//var path = tempPath+"/images/upload/"+fileName+"/"+imageName;
//document.getElementById("showImage").src=path;
//用于window下服务器显示图片
var scheme = '<%=request.getScheme() %>';
var serverName = '<%=request.getServerName() %>';
var path = '<%=request.getContextPath() %>';
var serverPort = '<%=request.getServerPort() %>';
var tempPath = scheme+"://"+serverName+":"+serverPort+path;
var imagePath = tempPath+"/images/upload/"+imageName;
document.getElementById("showImage").src=imagePath;
$('#imagePreview').show();
//定义Dialog的原始left和top
var default_left;
var default_top;
$('#imagePreview').dialog({
modal: true,
onOpen:function(){
//dialog原始left
default_left=$('#imagePreview').panel('options').left;
//dialog原始top
default_top=$('#imagePreview').panel('options').top;
},
onMove:function(left,top){ //鼠标拖动时事件
var body_width=document.body.offsetWidth;//body的宽度
var body_height=document.body.offsetHeight;//body的高度
var dd_width= $('#imagePreview').panel('options').width;//dialog的宽度
var dd_height= $('#imagePreview').panel('options').height;//dialog的高度
if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
$('#imagePreview').dialog('move',{
left:default_left,
top:default_top
});
}
}
});
}
</script>
</head>
<body>
<div id="imagePreview" title="图片预览" style="display:none;padding:5px;width:800px;height:600px;" >
<img width='100%' height='100%' id="showImage" />
</div>
</body>
</html>
分享到：
相关推荐
【标题】"仿 JQuery Dialog 简洁登录页面"是一个基于JQuery Dialog组件设计的简单登录界面，旨在提供用户友好的交互体验。JQuery Dialog是jQuery UI库中的一个功能，它允许开发者创建可自定义的弹出对话框，用于显示...
《jQuery Dialog 深度解析与实践应用》 在Web开发领域，jQuery Dialog是一款非常流行的JavaScript库，用于创建可交互的对话框。它基于jQuery框架，提供了丰富的功能和灵活的定制选项，使得开发者能够轻松地在网页上...
**jQuery Dialog弹出层对话框插件：深入解析与应用** jQuery Dialog是jQuery UI库中的一个组件，它提供了一种优雅的方式在网页上创建交互式的弹出层对话框。这个插件不仅允许用户展示信息，还可以加载外部URL内容，...
而jQuery UI则是在jQuery基础上扩展的一套交互式用户界面组件库，其中包括一个强大的对话框（Dialog）功能，即“jQuery dialog弹出层”。这个弹出层在网页应用中广泛用于创建模态或非模态警告、提示、确认或者更复杂...
总之，jQueryDialog插件为Web开发提供了强大且易于使用的对话框解决方案，结合jQuery库，可以轻松实现动态、交互式的用户界面，提高用户体验。通过学习和实践这些文件，你可以掌握如何在自己的项目中灵活运用jQuery...
jQuery Dialog 是一个非常流行的JavaScript库，它为网页提供了一种优雅的方式来创建弹出式对话框。这个插件是基于jQuery框架构建的，主要用于创建模态或非模态的窗口，通常用于显示警告、确认信息或者作为用户交互的...
**jQuery Dialog 深度解析与应用** jQuery UI Dialog 是一个功能强大的组件，它提供了丰富的交互式...在实际开发中，结合具体的项目需求，灵活运用Dialog的各种特性和方法，可以创建出满足用户需求的高质量界面。
jQuery dialog对话框插件是jQuery ...通过熟练掌握jQuery dialog，开发者可以创建出更加直观和用户友好的Web界面，提升用户体验。记住，根据项目需求灵活运用这些配置选项和API方法，可以实现各种定制化的对话框功能。
总的来说，jQuery Dialog 是一个强大且灵活的弹出框解决方案，它提供了一系列丰富的功能，使得在网页中创建各种类型的对话框变得简单快捷，同时保持了良好的浏览器兼容性和用户体验。在实际开发中，结合 HTML、CSS ...
《jQuery.dialog.js：网页弹出对话框的美化与特效实现》 在网页设计中，对话框（dialog）是一种常见的交互元素，用于展示重要的信息或进行用户操作确认。jQuery.dialog.js是一个专为网页开发者设计的轻量级插件，...
在使用jQuery UI Dialog组件进行表单提交时，有时会出现后台无法获取到表单数据的问题。这个问题通常是由于前端处理不当或后端接收方式不正确导致的。以下是对这个问题的详细分析和解决方案。 首先，jQuery UI ...
在上述代码中，我们创建了一个包含“正在处理，请稍候...”文本和加载动画的 Dialog，并在页面加载完成后将其设置为隐藏。`showWaitDialog` 函数用于打开 Dialog，`hideWaitDialog` 函数用于关闭。你可以根据实际...
jQuery UI Dialog组件默认情况下只提供关闭按钮，但开发者经常需要增加更多的功能，如最大化和最小化，以便用户能更好地管理和操作对话框。这个主题提供了两种实现方法： 1. **替换UI Close按钮**： 在这种方法中...
jQuery Dialog是jQuery UI库中的一个核心组件，它提供了一种优雅的方式来实现弹出对话框功能。这个插件允许开发者创建可自定义的模态或非模态窗口，用于显示警告、确认信息、输入数据或者展示丰富的内容。在网页交互...
在本实例中，我们关注的是`jquery_dialog`，这是一个jQuery插件，专门用于实现弹出窗口效果。这个插件使得在网页中创建各种形式的对话框变得简单而高效，比如警告消息、确认框或者自定义内容的弹窗。 首先，我们来...
jQuery Dialog 是一个强大的弹出层插件，常用于创建各种对话框、提示窗口或模态框，极大地丰富了网页的交互体验。这个插件是基于 jQuery 库构建的，因此在使用前确保已经引入了 jQuery。下面将详细介绍如何使用 ...
**jQuery Dialog 深度解析** jQuery Dialog 是 jQuery UI 库中的一个组件，它提供了一种弹出式对话框的功能，常用于展示警告、确认、信息...结合实际的项目需求，不断探索和实践，将能充分发挥 jQuery Dialog 的潜力。
本文将深入探讨jQuery通用Dialog插件的原理、使用方法以及如何通过源码分析增强自己的前端开发技能。 **jQuery Dialog 插件简介** jQuery Dialog是jQuery UI库中的一个组件，它提供了一种灵活的方式来创建弹出式...
其中，`jQuery.dialog`插件更是为创建弹出对话框提供了丰富的功能和高度的自定义选项，极大地提升了网页的交互性和用户体验。本文将深入解析`jQuery.dialog`插件的关键参数，帮助开发者更好地理解和运用这一工具。 ...
- `modal`: 如果设置为`true`，则对话框将在背景上添加半透明遮罩，创建模态效果，用户无法与对话框外的页面元素交互。 3. **事件处理** Dialog支持多种事件，如`open`、`close`、`beforeClose`等，可以绑定回调...