<!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>
<script language="javascript">
function alertWin(title, msg, w, h){
var s=document.getElementsByTagName("select"); //--------------把所有select标签捉住
for(var j=0;j<s.length;j++){s[j].style.display="none";} //--------------设为不显示，再进行下面操作
var titleheight = "22px"; // 提示窗口标题高度
var bordercolor = "#666699"; // 提示窗口的边框颜色
var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
var titlebgcolor = "#666699"; // 提示窗口的标题背景色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);
var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = title;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function () {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
closeBtn.onclick = function(){
for(var j=0;j<s.length;j++){s[j].style.display="";} //--------------再给select显出来
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan = 2;
msgBox.innerHTML = msg;
// 获得事件Event对象，用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type="button" value="点这里" onclick="alertWin('标题','这里是内容',300,200);" />
<select>
<option>件Event对象，用于兼</opation>
</select>
</body>
</html>
分享到：
相关推荐
这个“js+div 超酷模态对话框[带提示声音]”的资源，显然是一个利用JavaScript和HTML的div元素创建的具有特殊效果和声音提示的模态窗口。 1. **JavaScript（JS）**：JavaScript是网页开发中的重要脚本语言，用于...
【DIV模态窗口实现】是一种常见的前端网页设计技术，它允许在不离开当前页面的情况下，弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景，能够提供良好的用户体验，因为它...
这种实现方式相比传统的JavaScript或Flash模态窗口，更具有灵活性和可定制性，并且易于维护。 首先，让我们了解`<div>`元素。`<div>`是HTML中的一个通用容器元素，用于组合其他HTML元素，可以通过CSS来设置样式，使...
3. 使用JQuery编写JavaScript代码，实现模态窗口的显示和隐藏。 ```javascript $(document).ready(function() { $("#openModal").on('click', function() { $("#modal").addClass('fadeIn').delay(500).queue...
在本篇中，我们将深入探讨如何使用 `div` 和 `css` 实现模态窗口，并结合 `JavaScript` 进行动态控制。 首先，我们来了解 `div` 元素。`div` 是HTML中的一个通用容器标签，用于组合HTML元素，通过设置 `class` 或 `...
本资源主要探讨如何使用HTML `<div>` 元素来实现类似JavaScript模态窗口的效果。这既是一种节省资源、提高性能的方法，也适合初学者学习网页动态效果的实现。 首先，我们需要创建一个基本的HTML结构，包括`<head>`...
本文将详细介绍三种使用JavaScript实现模态窗口的方法，这些方法具有可定制性和实用性，可以直接应用于项目中。 **1. CSS + JavaScript 实现** 首先，我们可以通过CSS创建一个隐藏的模态窗口，并使用JavaScript来...
结合上述的知识点，你可以通过阅读`js实现图表.doc`和`js实现模态窗口.doc`文档，获取更具体的实现细节和示例代码，进一步提升你的JavaScript开发技能。记住，实践是最好的老师，尝试自己动手实现这些功能，将理论...
JavaScript的模态窗口是网页开发中常用的一种交互设计，它可以在用户进行其他操作时暂停页面流程，强制用户关注特定信息或执行某个操作。模态窗口通常由一个覆盖在主页面上的半透明背景（通常称为“mask”）和一个...
在本篇文章中，我们将深入探讨 EasyUI 的模态窗口插件，包括其基本使用方法、配置选项以及如何实现局部模态效果。 首先，让我们了解什么是模态窗口。模态窗口是一种阻止用户与主页面交互，直到关闭该窗口为止的窗口...
jQuery模态窗口通常通过CSS控制样式，JavaScript处理事件和行为来实现。基本思路是在页面上创建一个隐藏的div（模态窗口），当需要弹出时，通过改变其CSS属性使其可见，并添加必要的遮罩层，以阻止用户与背景内容的...
HTML5则提供了新的语义化标签，如`<dialog>`，用于创建对话框或模态窗口，但在这个项目中，开发者可能还是使用传统的`div`元素配合CSS和jQuery来实现模态窗口的功能。 综上所述，"jQuery+CSS3动画模态窗口.zip"是一...
在本文中，我们将深入探讨JavaScript模态窗口的实现、应用场景以及常见技术细节。 模态窗口的实现主要有两种方式：一种是使用原生HTML、CSS和JavaScript，另一种是利用现成的库或框架，如jQuery UI、Bootstrap等。...
在网页设计中，JavaScript（JS）经常被用来增强用户体验，其中一种常见的应用就是实现点击元素后展开或隐藏其他...这种特效在网页设计中非常常见，例如下拉菜单、折叠面板、模态窗口等，大大增强了用户与网页的互动性。
在JavaScript中，实现模态窗口主要依赖于DOM操作、事件处理和CSS样式控制。JavaScript库如jQuery、Bootstrap等提供了便捷的模态窗口API，使得开发者可以快速构建功能丰富的模态窗口。 一、JavaScript模态窗口基础 ...
jQuery，一个广泛使用的JavaScript库，提供了方便的方式来创建和操作模态窗口。这个主题将深入探讨jQuery实现模态窗口的基本原理、方法和最佳实践。 ### 1. 基本概念 模态窗口，又称对话框，是一种用户界面元素，...
总的来说，"点击弹出模态窗口下拉列表js代码"结合了HTML、CSS和JavaScript三者的功能，提供了一种高效且友好的用户交互方式。在实际开发中，可以根据具体需求进行定制，如增加多级下拉、自定义筛选规则等，以提升...
当我们需要在用户关闭模态窗口后刷新其父页面时，JavaScript（简称js）提供了解决方案。 在JavaScript中，我们可以利用事件监听来处理模态窗口关闭的事件。首先，我们需要在模态窗口上设置一个关闭按钮，并为其添加...
接下来是实现模态窗口功能的JavaScript代码。这段代码首先定义了两个函数`popupDiv`和`hideDiv`，它们分别用于显示和隐藏模态窗口。`popupDiv`函数首先获取传入的DIV元素，然后计算屏幕的高度和宽度以及传入DIV的...
本文实例讲述了js实现div模拟模态对话框展现URL内容。分享给大家供大家参考，具体如下： [removed] function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口...