<html>
<head>
<script>
function sAlert(txt)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
//window.alert(document.body.scrollHeight);
shield.style.height = document.body.scrollHeight+"px";
shield.style.background = "white";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=80)";
shield.style.opacity = 0.8;
//shield.style.border-width=thick;
strHtml = "<input type=\"button\" value=\" 确 定 \" id=\"do_OK\" onclick=\"doOk()\" />\n";
shield.innerHTML = strHtml;
document.body.appendChild(shield);
this.doOk = function(){
document.body.removeChild(shield);
}
document.getElementById("do_OK").focus();
}
</script>
</head>
<body >
<input type=button onclick="sAlert('登陆成功！')" value=登陆>
<p align=center><select><option>---</option></select></p>
</body>
</html>
=============================================================
<html>
<head>
<script>
var dragapproved=false
var minrestore=0 //该变量表示窗口目前的状态，0表示初始化状态，1表示最大化状态
var initialwidth,initialheight
//若Client浏览器为IE5.0以上版本的
var ie5=document.all&&document.getElementById
//若Client浏览器为NetsCape6。0版本以上的
var ns6=document.getElementById&&!document.all
function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
}
}
function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.display="none" //此句代码可不要
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)
dragapproved=true
document.getElementById("dwindow").onmousemove=drag_drop
}
function loadwindow(width,height){
if (!ie5&&!ns6) //若不为IE或Netscpae浏览器，则使用一般的Window.open进行弹出窗口处理
//window.open(url,"","width=width,height=height,scrollbars=1")
{
}
else{
document.getElementById("dwindow").style.display='';
document.getElementById("dwindow").style.width=initialwidth=width+"px";
document.getElementById("dwindow").style.height=initialheight=height+"px";
document.getElementById("dwindow").style.left="300px";
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px";
//document.getElementById("cframe").src=url
}
}
function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("src","layout.png")
document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","layout.png")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
}
document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}
function closeit(){
document.getElementById("dwindow").style.display="none"
}
function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=null;
document.getElementById("dwindowcontent").style.display="" //extra
}
</script>
</head>
<body>
<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
<div align="right" style="background-color:navy">
<img src="layout.png" id="maxname" onClick="maximize()">
<img src="icon_delete.gif" onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">
</div>
</div>
<input type="button" value="弹出窗口" onclick='loadwindow(300,200);'>
</body>
</html>
注意请自己添加图片~~~~~
原文：http://www.cnblogs.com/highhigh/archive/2007/12/06/985360.html
分享到：
相关推荐
jQuery弹出div对话框是一种常见的网页交互功能，用于在页面上显示临时通知、用户确认、表单输入等信息。在Web开发中，jQuery库提供了一种简洁高效的方式来实现这一功能，而无需依赖复杂的插件。下面我们将深入探讨...
在这个场景中，"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能，允许用户可以手动拖动 HTML 的 `div` 元素（通常用于创建对话框或模态窗口）在页面上自由移动。这种功能提高了用户体验，让用户...
这段代码会在页面加载完成后将ID为"dialog"的div元素转化为一个带有标题“基本对话框”的弹出对话框。 除了基本对话框，jQuery UI的`.dialog()`方法还支持许多自定义选项，例如设置宽度、高度、是否可拖动、是否...
Dialog基于jQuery弹出层对话框插件是一种广泛应用于网页交互中的组件，它允许开发者在页面上创建可定制的、交互式的对话窗口。该插件利用了JavaScript库jQuery的强大功能，结合CSS3技术，实现了丰富的动画效果和灵活...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。...对于更复杂的对话框功能，如拖动、模态效果等，还可以进一步探索和学习相关的JavaScript库，如SweetAlert2或jQuery UI Dialog。
在本文中，我们将深入探讨JavaScript弹出层的设计原则、实现方法以及一些实用的库和技巧。 首先，JavaScript是一种广泛用于网页动态交互的编程语言，它可以创建交互式的用户界面，包括弹出层。弹出层通常分为两种...
在网页设计中，"页面中弹出对话框div"是一个常见的需求，用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面，而是覆盖在内容上，提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...
《jQuery实现弹出登录对话框详解》 在网页开发中，提供友好的用户交互体验是至关重要的，其中，弹出对话框是一种常见的交互方式。在本文中，我们将深入探讨如何利用jQuery库创建一个弹出登录对话框，为用户提供无缝...
"模仿MSN弹出对话框"这个项目，就是利用JavaScript来创建一个类似于微软即时通讯软件MSN的对话框效果，使得用户在网页上能够体验到类似的交互功能。 在JavaScript特效中，弹窗漂浮是一种常见的应用，它通常用于显示...
《jQuery.dialog.js网页弹出对话框美化特效插件详解》 在网页开发中，弹出对话框是一种常见的交互设计，用于向用户展示重要的信息或进行关键操作。jQuery库以其简洁的API和强大的功能，成为了JavaScript开发者们...
在实现弹出对话框时，我们需要创建一个包含对话框元素的容器，例如`<div>`，并设置相应的ID或类名以便于CSS和JavaScript操作。例如： ```html <div id="popup-dialog" class="popDrag"> 自定义对话框 请输入内容...
1. `alert()` 函数：`alert()` 是JavaScript中最基本的对话框，它会弹出一个带有消息的警告对话框，并且有一个“确定”按钮。例如： ```javascript alert("你好，这是一个警告对话框！"); ``` 这行代码会在...
`artDialog` 是一个功能强大的JavaScript弹出对话框插件，以其简洁的API和丰富的自定义选项深受前端开发者喜爱。它允许开发者轻松创建各种类型的对话框，如提示、确认、警告以及自定义内容的对话框，同时提供了内置...
在网页开发中，有时我们需要与用户进行交互，这时页面弹出的对话框就显得尤为重要。对话框可以用于提示信息、确认操作或者获取用户输入。在本主题中，我们将深入探讨如何利用JavaScript和HTML来实现页面上的各种...
2. 创建一个基本的对话框容器，通常是一个div元素，用于存放对话框的内容。 3. 使用jQuery选择器找到对话框容器，并调用`.dialogBox()`方法初始化插件。在此过程中，可以传递参数来设置对话框的属性和行为。 4. 如果...
在JavaScript（简称JS）编程中，创建一个可移动的对话框是一种常见的需求，尤其是在构建交互式的Web应用时。对话框通常用于向用户显示警告、询问信息或者提供额外的交互界面。本实例将介绍如何利用JavaScript实现一...
在“JS弹出Div窗口(可拖拽)”的压缩包中，可能包含HTML文件用于展示Demo，JavaScript文件包含了实现弹出和拖动功能的代码，以及CSS文件用于样式定义。通过分析和学习这些文件，开发者可以理解并掌握如何在自己的项目...
在本文中，我们将深入探讨如何利用JavaScript实现一个弹出div窗口，包括支持遮罩、拖动、嵌入页面和换肤等功能。 首先，让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中，弹出窗口通常指的是不依赖浏览器...
在本篇jQuery实战视频教程中，我们聚焦于一个常见的网页交互功能：页面加载时自动弹出对话框。这个功能在很多网站中都有应用，比如欢迎提示、重要信息通知或者用户确认操作等。jQuery库因其简洁易用的API，使得实现...
1. **选择触发元素**：使用jQuery的选择器（如`$("#myButton")`）来选取用户点击后要弹出对话框的按钮或其他元素。 2. **添加事件监听器**：使用`.click()`方法为选定元素添加点击事件监听器。当用户点击该元素时，...