今天写一个自定义网页对话框的例子,你是不是对一成不变的对话框看腻了呢,如果你的回答是肯定的呢,那就跟我来吧,let's go.
<!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=gb2312" /> <title>自定义网页对话框</title> <mce:script type="text/javascript"><!-- //移动层的类 function DivMove(){ this.Move = function(DivID,Evt){ if(DivID == ""){ return; } var DivObj = document.getElementById(DivID); evt = Evt?Evt:window.event; if(!DivObj){ return; } var DivW = DivObj.offsetWidth; var DivH = DivObj.offsetHeight; var DivL = DivObj.offsetLeft; var DivT = DivObj.offsetTop; var TemDiv = document.createElement("div"); TemDiv.id = DivID + "tem"; document.body.appendChild(TemDiv); TemDiv.style.cssText = "width:"+DivW+"px;height:"+DivH+"px;top:"+DivT+"px;left:"+DivL+"px;position:absolute; border:#ff0000 1px dotted;z-index:500"; this.MoveStart(DivID,evt); } this.MoveStart = function(DivID,Evt){ var TemDivObj = document.getElementById(DivID+"tem"); if(!TemDivObj) return; evt = Evt?Evt:window.event; var rLeft = evt.clientX - TemDivObj.offsetLeft; var rTop = evt.clientY - TemDivObj.offsetTop; if (!window.captureEvents){ TemDivObj.setCapture(); }else{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } document.onmousemove = function(e) { if (!TemDivObj){ return; } e = e ? e : window.event; if (e.clientX - rLeft <= 0){ TemDivObj.style.left = 0 +"px"; }else if(e.clientX - rLeft >= document.documentElement.clientWidth - TemDivObj.offsetWidth - 2){ TemDivObj.style.left = (document.documentElement.clientWidth - TemDivObj.offsetWidth - 2) +"px"; }else{ TemDivObj.style.left = e.clientX - rLeft +"px"; } if (e.clientY - rTop <= 1){ }else{ TemDivObj.style.top = e.clientY - rTop +"px"; } } document.onmouseup = function() { if (!TemDivObj){return;} if (!window.captureEvents){ TemDivObj.releaseCapture(); }else{ window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); } var DivObj1 = document.getElementById(DivID); if (!DivObj1) return; var l0 = TemDivObj.offsetLeft; var t0 = TemDivObj.offsetTop; DivObj1.style.top = t0 + "px"; DivObj1.style.left = l0 + "px"; document.body.removeChild(TemDivObj); TemDivObj = null; } } } var MoveDiv = new DivMove();//创建移动层的实例 function myalert(str){ //var MoveDiv = new DivMove();//创建移动层的实例 var alertTop = document.documentElement.scrollTop + 100;//得到滚动位置，设置对话框顶部位置 var alertLeft = (document.body.offsetWidth - 350) / 2;//设置对话框居中显示 var obj = document.createElement("div");//创建一个div标签，作为自定对话框的容器 obj.id = "myalertdiv"; document.body.appendChild(obj); obj.style.cssText = "position:absolute; left:"+alertLeft+"px; top:"+alertTop+"px; border:#999999 1px solid; width:350px; height:150px; z-index:1000;";//设定对话框容器的样式 obj.innerHTML = '<div style="border:0; height:20px; line-height:20px; width:100%; background-color:#0000ff; font-size:12px; color:#ffffff" onmousedown="javascript:MoveDiv.Move(\'myalertdiv\',event)">定义对话框<div style="position:absolute;cursor:default; top:0px; left:340px;" onmouseover="this.style.color=\'#ff0000\';" onmouseout="this.style.color=\'#ffffff\'" onclick="removeAlert();">X</div></div><div style="width:320px;height:110px; line-height:20px; font-size:14px; text-align:center; padding-top:20px; padding-left:15px; padding-right:15px;">'+str+'</div><div style="position:absolute;left:300px; top:120px; width:50px;height:30px;"><button type="button" onclick="removeAlert()">确定</button></div>';//设置对话框的内容，这里可以设置的漂亮一些，我只是简单设置一下，没有用图片，这些你们可自行设置喜欢的样式 } function removeAlert(){//关闭对话框函数 if(document.getElementById("myalertdiv")){ document.body.removeChild(document.getElementById("myalertdiv")); } } // --></mce:script> </head> <body> <button onclick="myalert('我的自定义对话框的例子');">Alert</button> </body> </html>
这个例子在XP + IE6,IE7,Firefox下测试通过
您还没有登录,请您登录后再发表评论
**自定义jQuery对话框**是Web开发中一个重要的交互元素，它用于在用户与网页进行交互时提供额外的信息或操作选项。jQuery库以其简洁的API和丰富的插件生态系统，使得创建自定义对话框变得非常简单。本文将深入探讨...
在实际应用中，自定义颜色对话框常用于图形编辑工具、网页设计软件、游戏开发等领域，它可以极大地丰富用户的创作体验。例如，在一个绘图应用中，用户可能需要选择非常精确的颜色，而自定义对话框可以提供更丰富的...
对话框在网页交互中扮演着重要的角色，它们可以用于提示信息、获取用户输入或者展示复杂的内容。JQuery提供了一个方便的`dialog()`方法来创建这样的交互式元素。在这个例子中，我们将学习如何利用JQuery和CSS来自...
在网页开发中，自定义AJAX对话框是一种常见的交互设计技术，它允许用户与服务器进行异步通信，而无需刷新整个页面。这种技术极大地提升了用户体验，因为它使得数据的加载和处理更加流畅，减少了用户等待时间。本文将...
在网页应用中，对话框的实现能够提高用户体验，使交互更为直观。 描述中提到的“提供对话框插件，点击按钮弹出对话框，页面背景变成灰色，不可用”，这描述的是一个标准的模态对话框行为。当对话框打开时，用户无法...
弹窗对话框是一种在网页上创建浮动窗口的方法，用于显示警告、确认信息或进行用户交互，如填写表单。在jQuery中，我们可以通过创建元素，然后利用CSS进行样式设置，最后通过JavaScript控制其显示与隐藏来实现弹窗...
为了实现自定义的提示信息格式，我们可以创建一个新的对话框资源，这通常涉及到设计对话框模板（如.vsd文件），并在代码中处理对话框的初始化和消息处理。在这个项目中，可能有一个.vchtml.aps文件，它是Visual ...
【JavaScript 自定义对话框实现】 在网页开发中，与用户进行交互是不可或缺的一部分，而`alert()`函数是最常见的用于提示用户的方式。然而，`alert()`虽然简单易用，但其样式固定、功能有限，无法满足现代网页对于...
无论是在移动应用还是桌面应用，甚至是网页中，开发者都可以通过各种方式实现对话框的个性化设计，以满足不同场景的需求。通过掌握各个平台的API和工具，你可以创造出既美观又实用的对话框，提高用户与你的应用程序...
在传统的网页设计中，JavaScript的`alert()`、`prompt()`和`confirm()`函数提供了基本的对话框功能，但它们的功能和样式都比较有限。随着Web技术的发展，现代Web应用更多地依赖于CSS和JavaScript来创建自定义的...
标题中的“自定义window.alert对话框JS代码”指的是一种通过编写JavaScript代码实现的自定义对话框功能，它可以拥有独特的外观和交互效果，使得信息提示更加吸引用户注意且符合网页整体风格。 描述中提到的“非常...
在IT行业中，自定义对话框是一种常见的用户界面元素，它允许开发者为应用程序提供特定的交互体验。在"已封装自定义对话框javascript"这个主题中，我们主要关注的是使用JavaScript来创建和管理自定义对话框的技术。...
在Java编程中，创建自定义对话框是一种常见的用户交互手段，尤其在开发桌面应用程序时。当我们需要从用户那里获取特定信息或展示警告、确认信息时，对话框是必不可少的组件。下面将详细介绍如何在Java中实现点击按钮...
"Demo"目录很可能是存放演示程序的，它可能包含一个或多个网页，这些网页演示了如何在实际应用中使用这个自定义对话框。开发者可以通过运行这些示例来观察对话框的各种功能，如样式、动画效果、按钮行为等，这有助于...
"非常酷的网页对话框"可能包含JavaScript库，如jQuery UI、Bootstrap Modal或者更现代的React、Vue组件，这些库提供了丰富的对话框实现和自定义选项。开发人员可以利用这些工具快速构建交互式、动态的对话框，同时...
网页对话框是网页设计中不可或缺的一部分，它们用于与用户交互，提供信息，或者接收用户的输入。在HTML和JavaScript的世界里，我们通常会遇到几种类型的网页对话框：警告对话框、确认对话框和输入对话框。 1. 警告...
内容索引:.NET源码,控件组件,弹出窗口 一个实用、漂亮的自定义网页对话框源代码附Demo，风格样式类似QQ的窗口一样，可以自定义标题和内容、改变颜色和窗体透明度等，弹出窗口后背景变暗，窗体效果如上所示。...
标题"一个基于纯js实现的网页对话框及消息框组件源码及例子"揭示了我们将探讨的是一个自定义的JavaScript组件，用于创建弹出对话框和消息框。纯JavaScript意味着开发者可以更好地理解和控制代码，同时也能提高页面...
在本篇文章中，我们将深入探讨如何通过源码创建一个自定义的模拟网页对话框，并探讨其在实际开发中的应用。 首先，我们可以通过HTML、CSS和JavaScript来构建一个基本的模拟对话框。`x.html`文件可能就是一个简单的...
相关推荐
**自定义jQuery对话框**是Web开发中一个重要的交互元素，它用于在用户与网页进行交互时提供额外的信息或操作选项。jQuery库以其简洁的API和丰富的插件生态系统，使得创建自定义对话框变得非常简单。本文将深入探讨...
在实际应用中，自定义颜色对话框常用于图形编辑工具、网页设计软件、游戏开发等领域，它可以极大地丰富用户的创作体验。例如，在一个绘图应用中，用户可能需要选择非常精确的颜色，而自定义对话框可以提供更丰富的...
对话框在网页交互中扮演着重要的角色，它们可以用于提示信息、获取用户输入或者展示复杂的内容。JQuery提供了一个方便的`dialog()`方法来创建这样的交互式元素。在这个例子中，我们将学习如何利用JQuery和CSS来自...
在网页开发中，自定义AJAX对话框是一种常见的交互设计技术，它允许用户与服务器进行异步通信，而无需刷新整个页面。这种技术极大地提升了用户体验，因为它使得数据的加载和处理更加流畅，减少了用户等待时间。本文将...
在网页应用中，对话框的实现能够提高用户体验，使交互更为直观。 描述中提到的“提供对话框插件，点击按钮弹出对话框，页面背景变成灰色，不可用”，这描述的是一个标准的模态对话框行为。当对话框打开时，用户无法...
弹窗对话框是一种在网页上创建浮动窗口的方法，用于显示警告、确认信息或进行用户交互，如填写表单。在jQuery中，我们可以通过创建元素，然后利用CSS进行样式设置，最后通过JavaScript控制其显示与隐藏来实现弹窗...
为了实现自定义的提示信息格式，我们可以创建一个新的对话框资源，这通常涉及到设计对话框模板（如.vsd文件），并在代码中处理对话框的初始化和消息处理。在这个项目中，可能有一个.vchtml.aps文件，它是Visual ...
【JavaScript 自定义对话框实现】 在网页开发中，与用户进行交互是不可或缺的一部分，而`alert()`函数是最常见的用于提示用户的方式。然而，`alert()`虽然简单易用，但其样式固定、功能有限，无法满足现代网页对于...
无论是在移动应用还是桌面应用，甚至是网页中，开发者都可以通过各种方式实现对话框的个性化设计，以满足不同场景的需求。通过掌握各个平台的API和工具，你可以创造出既美观又实用的对话框，提高用户与你的应用程序...
在传统的网页设计中，JavaScript的`alert()`、`prompt()`和`confirm()`函数提供了基本的对话框功能，但它们的功能和样式都比较有限。随着Web技术的发展，现代Web应用更多地依赖于CSS和JavaScript来创建自定义的...
标题中的“自定义window.alert对话框JS代码”指的是一种通过编写JavaScript代码实现的自定义对话框功能，它可以拥有独特的外观和交互效果，使得信息提示更加吸引用户注意且符合网页整体风格。 描述中提到的“非常...
在IT行业中，自定义对话框是一种常见的用户界面元素，它允许开发者为应用程序提供特定的交互体验。在"已封装自定义对话框javascript"这个主题中，我们主要关注的是使用JavaScript来创建和管理自定义对话框的技术。...
在Java编程中，创建自定义对话框是一种常见的用户交互手段，尤其在开发桌面应用程序时。当我们需要从用户那里获取特定信息或展示警告、确认信息时，对话框是必不可少的组件。下面将详细介绍如何在Java中实现点击按钮...
"Demo"目录很可能是存放演示程序的，它可能包含一个或多个网页，这些网页演示了如何在实际应用中使用这个自定义对话框。开发者可以通过运行这些示例来观察对话框的各种功能，如样式、动画效果、按钮行为等，这有助于...
"非常酷的网页对话框"可能包含JavaScript库，如jQuery UI、Bootstrap Modal或者更现代的React、Vue组件，这些库提供了丰富的对话框实现和自定义选项。开发人员可以利用这些工具快速构建交互式、动态的对话框，同时...
网页对话框是网页设计中不可或缺的一部分，它们用于与用户交互，提供信息，或者接收用户的输入。在HTML和JavaScript的世界里，我们通常会遇到几种类型的网页对话框：警告对话框、确认对话框和输入对话框。 1. 警告...
内容索引:.NET源码,控件组件,弹出窗口 一个实用、漂亮的自定义网页对话框源代码附Demo，风格样式类似QQ的窗口一样，可以自定义标题和内容、改变颜色和窗体透明度等，弹出窗口后背景变暗，窗体效果如上所示。...
标题"一个基于纯js实现的网页对话框及消息框组件源码及例子"揭示了我们将探讨的是一个自定义的JavaScript组件，用于创建弹出对话框和消息框。纯JavaScript意味着开发者可以更好地理解和控制代码，同时也能提高页面...
在本篇文章中，我们将深入探讨如何通过源码创建一个自定义的模拟网页对话框，并探讨其在实际开发中的应用。 首先，我们可以通过HTML、CSS和JavaScript来构建一个基本的模拟对话框。`x.html`文件可能就是一个简单的...