<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#mbDIV
{
position: absolute;
top: 0px;
left: 0px;
width:expression(screen.width+"px"); /*获得浏览器的宽度 document.body.clientWidth也可以*/
height:expression(screen.height+"px"); /*获得浏览器的宽度 document.body.clientHeight也可以*/
background-color: #AAAAAA;
z-index: 30;
filter: alpha(opacity=50);
}
#loginDIV
{
position: absolute;
width: 500px;
height: 180px;
background-color:white;
z-index: 40;
}
#loginTopDIV
{
width: 100%;
height: 22px;
text-align:center;
background-color: blue;
cursor: move;
}
</style>
</head>
<body>
<div id="mbDIV" style="display: none;"></div><!--遮盖层-->
<div id="loginDIV" style="display: none; left: 300px; top: 200px">
<div id="loginTopDIV">div模式窗体</div>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td align="center" colspan="2">这里就对话框中的内容，且支持拖动功能，欢迎测试！ </td>
</tr>
<tr>
<td align="center"><input onclick="closeDIV()" type="button" value="关闭"> </td>
</tr>
</table>
</div>
<div align="center"><input onclick="openDIV()" type="button" value="测试DIV模拟showModalDialog对话框"> </div>
<script>
function show(ele)
{
document.getElementById(ele).style.display="block";
}
function hidden(ele)
{
document.getElementById(ele).style.display="none";
}
function closeDIV()
{
hidden("loginDIV");
hidden("mbDIV");
}
function openDIV()
{
show("loginDIV");
show("mbDIV");
}
var mbDIV = document.getElementById("mbDIV");;
var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");
/**
*这里写的是拖动信息
* */
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
//判断 top 和 left 是否超出边界
top = top < 0 ? 0 : top;
top = top > screen.height - 150 ? screen.height - 150 : top;
left = left < 0 ? 0 : left;
left = left >screen.width- 300 ?screen.width - 300 : left;
loginDIV.style.top = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}
</script>
</body>
</html>
分享到：
相关推荐
今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子! 这个效果我通过参考赛我网上的个别效果而参考而来,他的比较复杂,因为结合了其他的一些功能,在这里我就是简要的总结下...
在网页设计中，"div弹出模式窗体，消息框样式"是一个常见的需求，用于向用户展示重要信息、警告或确认操作。这种技术利用HTML的`<div>`元素结合CSS来创建可定制的对话框，提供了更加丰富和交互性的用户体验。下面...
### JSP中生成模式窗体代码详解 #### 概述 在Web开发中，模式窗体（Modal Form）是一种常见的用户交互方式，它能够提供一个弹出式的对话框，用于展示信息、收集用户输入等场景。本文将详细介绍如何在JSP（Java...
为了实现仿模式窗体，我们需要利用CSS来实现窗口的定位、尺寸、边框、背景色、透明度等效果，使其看起来像是悬浮在页面上的独立元素。可以使用`position: fixed`或`absolute`来实现窗口固定在屏幕中央，`z-index`...
本资源包“jQuery弹出div窗体插件大全”聚焦于利用jQuery实现弹出div窗口的功能，这些插件可以帮助开发者快速创建交互式、功能丰富的对话框或提示窗口，提升用户体验。 首先，让我们来理解什么是jQuery弹出div窗体...
本示例是用div元素实现的模式窗口，结合了HTML、CSS和JavaScript（包括jQuery库）技术，适用于.NET开发环境。 首先，`text.html`文件展示了模式窗口的实际效果。在HTML中，我们通常会创建一个隐藏的div作为模态窗口...
在网页开发中，模态窗体（Modal Window）是一种常用的设计元素，用于向用户展示重要的信息、确认操作或收集输入数据。模态窗体的特点是它会暂停主页面的交互，直到用户与其交互并关闭为止。本文将详细介绍模态窗体的...
jQuery提供了多种方法来实现弹出窗体功能，这通常被称为“模式窗体”或“模态对话框”。让我们深入了解一下如何使用jQuery创建弹出窗体。 首先，我们需要了解什么是模式窗体。模式窗体是一种特殊的窗口，它在用户与...
其实在Silverlight中开发模式窗体并不难，比在Html里面用div来构造容易多了，但是要做到具有重用性和规范性还是要下一点工夫的。如果SL的开发朋友们想偷一点懒，直接用些现成写好的模式窗体代码的话，我在这里介绍一...
<div id="dialog" title="模式窗口"> 内容在这里... </div> ``` 在JavaScript中初始化对话框： ```javascript $(function() { $("#dialog").dialog({ modal: true }); }); ``` 2. **Bootstrap Modal** ...
在HTML编程中，模态窗口（Modal Dialog）是一种常见的用户界面设计模式，它可以在主页面上弹出一个不可忽略的窗口，用户必须先处理模态窗口中的内容才能继续与主页面交互。模态窗口通常用于确认操作、输入数据或者...
<div id="dialog" style="display:none;"> 这是一段模态对话框的内容。 </div> $(document).ready(function() { $("#open-dialog").click(function() { $("#dialog").modalDialog(); }); }); ``` 这段代码中...
要创建一个模式窗口，我们首先需要在HTML中定义一个隐藏的div，里面包含我们要显示的内容。例如： ```html <div id="modalWindow" style="display:none;"> <!-- 表单内容 --> </div> ``` 接下来，使用...
编写代码实现简单窗体身份验证 在本文中，我们将讨论如何编写代码实现简单的窗体身份验证。身份验证是指在网络应用程序中，验证用户身份是否...通过使用 Forms 验证模式和登录页面，我们可以实现简单的窗体身份验证。
要创建一个自定义模式窗口，我们首先需要在HTML中定义一个隐藏的div元素，作为模态窗口的容器。例如： ```html <div id="popupDiv" class="modal"> <div class="modal-content"> <!-- 在这里添加你的模态内容 -->...
<div class="boxheader-text">显示窗体</span></div> </div> <div class="btnright"> ('buy');">关闭"/> </div> </div> </div> <div class="modalbody"> 希望能大家多多交流! </div> </div> ``` ##### 第...
5. **弹出窗体的名称**：虽然HTML的`<div>`元素本身没有名称属性，但可以通过添加类名（class）或者ID（id）来为对话框命名。例如，`class="myModelDialog"`或`id="myModal"`，然后在CSS和JavaScript中引用这些名称...
8. **测试与调试**：为了确保控件在各种情况下都能正确工作，开发者需要在不同的屏幕尺寸和分辨率下进行广泛的测试，包括横屏和竖屏模式，以及模拟不同的设备类型。 通过理解以上知识点，并熟练运用到实际项目中，...
这种设计模式常用于用户需要专注完成某个操作，避免其他页面元素干扰的情况。 在jQuery中，实现弹出层通常涉及到以下知识点： 1. **jQuery选择器**：jQuery库提供了丰富的选择器来选取DOM元素，如`$("#id")`用于...