js弹出对话框的3种方式

合集下载

js中dialog的用法

js中dialog的用法在Web开发中，JS作为一种客户端脚本语言，在页面交互中扮演着重要的角色。

其中，Dialog对话框作为JS中的一种组件，起到了与用户进行互动的作用。

本文将借助于jQuery，探讨JS中Dialog的使用方法。

一、弹窗的创建在使用Dialog的过程中，首先需要对其进行定义。

在jQuery UI中，Dialog的创建是通过 $("#dialog").dialog() 一行来实现的，其中dialog()函数中携带的参数可以根据需要进行设置。

例如：$('#dialog').dialog({autoOpen: false,modal: true,open: function() {// ...},close: function() {// ...}});我们通过这段代码，定义了一个id为“dialog”的Dialog组件。

其中，autoOpen 参数表示是否自动打开；modal参数表示是否为模态对话框；open和close参数表示在Dialog打开和关闭时需要执行的回调函数。

二、弹窗的打开当我们需要调用Dialog的时候，只需要调用dialog("open")函数即可。

例如： $('#dialog').dialog("open");也可以给触发打开Dialog的元素绑定事件，例如：$('button').click(function(){$('#dialog').dialog("open");});当然，为了更好的用户体验，我们可以通过修改autoOpen参数来实现Dialog 的自动打开。

例如：$('#dialog').dialog({autoOpen: true});三、弹窗的关闭Dialog的关闭方式可以通过close()函数来实现。

js中prompt用法

js中prompt用法JavaScript（简称JS）是一种广泛应用于Web页面交互的脚本语言。

它可以通过在页面上插入脚本代码来实现与用户的互动，其中prompt是JS中一个常用的方法。

本文将介绍prompt的用法及一些注意事项。

1. prompt的基本用法prompt是一个能弹出一个对话框，询问用户输入内容的方法。

它的基本语法如下：```prompt("message", "default value");```其中，"message"是一个字符串，用于向用户显示提示信息；"default value"是可选参数，用于设置文本框的默认值。

当用户在对话框中输入内容后，prompt会返回用户输入的值。

下面是一个示例：```javascriptvar name = prompt("请输入您的姓名：");alert("欢迎您，" + name + "!");```在上述代码中，用户输入姓名后，会弹出一个欢迎框，显示用户输入的姓名。

2. prompt与数据类型需要注意的是，prompt返回的值始终是一个字符串类型，无论用户输入的是什么类型的数据。

因此，如果需要对用户输入的值进行数值计算或其他类型的操作，需要进行相应的数据类型转换。

例如，如果用户需要输入一个数字，并将其与另一个数字相加，可以使用parseInt()或parseFloat()方法将字符串转换为数值类型，如下所示：```javascriptvar number1 = 10;var number2 = prompt("请输入一个数字：");number2 = parseInt(number2);var result = number1 + number2;alert("结果为：" + result);```在上述代码中，将prompt返回的字符串转换为整数，然后与预设的数字相加，得到最终的结果。

jsp页面点击按钮弹出对话框

unadorned : yes | no | 1 | 0 | on | off 指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
另外，在NewBox.jsp的javaScript代码bconfirm()方法中：
<SCRIPT>
使用DHTML，可以有两种实现方法：
1.通过window.open方法以弹出页面方式实现。
2.通过window.showModalDialog方法以弹出对话框方式实现。(推荐)
一.通过window.open方法弹出对话框
在写JSP页面的时候，有时需要点击一个按钮弹出一个输入对话框，然后输入一个值，确定后关闭对话框，把数据写入数据库，刷新当前页面。
二.通过window.showModalDialog方法弹出对话框。（推荐）
仍然是在页面AddName.jsp里要调用对话框，写一个JSP页面NewBox.jsp（用做对话框），然后在页面AddName.jsp里加上一段js代码：
/*用来打开对话框页面，注意这回openwindow()函数里的的方法是window.showModalDialog*/
fullscreen=no 窗口模式，yes为全屏模式
toolbar=no, 显示工具条
location=no,显示网址栏
directories=no,导航条
status=no,状态条
menubar=no,菜单
scrollbars=no,滚动条
function openwindow()
{
window.showModalDialog("NewBox.jsp",window,"status:no;scroll:no;

23个Javascript弹出窗口特效整理

23个Javascript弹出窗口特效整理1. LightviewLightview是一个基于Prototype与开发，用于创建可以覆盖整个页面的模式对话框。

展示的内容不仅可以是图片、文字、网页、通过Ajax 调用的内容，还可以是Quicktime/Flash影片都能够以非常酷的效果展示。

2. ThickBox (演示地址)ThickBox是一个模式对话框UI控件。

基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax 获取的内容。

3. Fonshen JS Window (演示地址)风声JS窗口为模拟WEB弹出窗口和对话框提供一种方案。

程序基于JavaScript/X HTML/CSS标准实现。

支持自由度极高的窗口样式定制；交互方面提供模拟的按钮编程模型，可以很好的模拟对话框；另外，接口参考Javascript内置对象window的一些方法（比如：window.open, window.alert, window.confirm），简洁方便。

4. ymPrompt在web开发中，对于浏览器默认的消息提示框（如alert,confirm 等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。

在外观上可以通过css进行完全的控制。

调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。

提供四种消息类型。

分别为消息提示、成功信息、错误信息、询问信息。

5. ModalboxModalBox用于生成Web2.0风格的模式对话框。

基于Prototype 框架开发，效果类似Mac OSX的模式对话框。

内容可以通过Ajax加载或普通的HTML页面。

6. SliderWindowSliderWindow是一个基于YUI开发消息提醒滑动窗体。

7. MOOdalBox (演示地址)MOOdalBox是一个基于Mootools框架开发的Web2.0模式对话。

js弹出窗口总结6种弹窗方法

js弹出窗口总结6种弹窗方法注：//关闭,父窗口弹出对话框，子窗口直接关闭this.Response。

Write（”<script language=javascript>window。

close（);〈/script>")；//关闭,父窗口和子窗口都不弹出对话框，直接关闭this.Response。

Write("<script>”)；this。

Response.Write("｛top。

opener =null;top。

close(）；｝”);this。

Response。

Write("</script>”）;//弹出窗口刷新当前页面width=200 height=200菜单。

菜单栏，工具条，地址栏，状态栏全没有this。

Response。

Write（”<script language=javascript>window.open（’rows。

aspx'，’newwindow'，'width=200,height=200’）</scri pt>”）;//弹出窗口刷新当前页面this。

Response.Write("〈script language=javascript〉window。

open('rows。

aspx')</script〉”）;this。

Response。

Write（”<script〉window。

open（'WebForm2.aspx’，'_blank');</script〉”);//弹出提示窗口跳到webform2。

aspx页(在一个IE窗口中)this。

Response。

Write（" <script language=javascript>alert('注册成功')； window。

javascript弹出窗口代码大全

javascript弹出窗⼝代码⼤全如何利⽤⽹页弹出各种形式的窗⼝，我想⼤家⼤多都是知道些的，但那种多种多样的弹出式窗⼝是怎么搞出来的，今天找了⼀篇好⽂学习了： 1.弹启⼀个全屏窗⼝<html><body onload="window.open('','example01','fullscreen');">;<b></b></body></html> 2.弹启⼀个被F11化后的窗⼝<html><body onload="window.open(''','example02','channelmode');">;<b></b></body></html> 3.弹启⼀个带有收藏链接⼯具栏的窗⼝<html><body onload="window.open('','example03','width=400,height=300,directories');"><b></b></body></html> 4.⽹页对话框<html><SCRIPT LANGUAGE="javascript"></SCRIPT><b></b></body></html><html><SCRIPT LANGUAGE="javascript"></SCRIPT><b></b></body></html> showModalDialog()或是showModelessDialog() 来调⽤⽹页对话框，⾄于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗⼝（简称模式窗⼝），置在⽗窗⼝上，必须关闭才能访问⽗窗⼝(建议尽量少⽤，以免招⼈反感)；showModelessDialog()dialogHeight: iHeight 设置对话框窗⼝的⾼度。

JS弹出窗口的各种传值方法

JS弹出窗口的各种传值方法在JavaScript中，弹出窗口是一种常见的用户交互方式。

通过弹出窗口，可以显示其他页面、表单或者提示框等内容。

而传值则是在弹出窗口中传递数据的一种方式，使得弹出窗口可以获取到主页面中的数据，并在弹出窗口中进行操作。

下面将介绍JS弹出窗口的各种传值方法，包括使用URL参数、使用cookie、使用localStorage、使用sessionStorage和使用postMessage 等。

1.使用URL参数：使用URL参数是一种简单的传值方法，可以通过在URL后面添加参数的形式将数据传递给弹出窗口。

例如：```javascriptvar data = 'Hello World!';window.open(url, 'popup', 'width=500,height=500');```在弹出窗口的页面中，可以通过获取URL参数来获取传递的数据：```javascriptvar urlParams = new URLSearchParams(window.location.search);var data = urlParams.get('data');```2. 使用cookie：使用cookie也是一种传值的常见方式。

通过设置cookie，可以将数据保存在用户的浏览器中，然后在弹出窗口中读取cookie来获取数据。

例如：```javascriptdocument.cookie = "data=Hello World!";window.open('popup.html', 'popup', 'width=500,height=500');```在弹出窗口的页面中，可以通过document.cookie来获取cookie的值：```javascriptvar cookieValue = document.cookie.split('; ').find(row => row.startsWith('data=')).split('=')[1];```3. 使用localStorage：localStorage是一种HTML5提供的本地存储方式，可以将数据保存在用户的浏览器中。

JS弹出自定义菜单+对话框+提示框大全

1.HTML代码<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"><htmlxmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office "><head id="Head1"runat="server"><title>JS弹出自定义菜单+警告框+确认框+HTML内容+对话框示例</title><script type="text/javascript"src="popup.js"></script><script type="text/javascript"src="popupclass.js"></script><style type="text/css">.singleStyle{margin:0000; padding:0000;border: solid1px#ffffff;background-color: #FEFEFE;text-align: left;vertical-align: middle;cursor: default;font-size: 12px;height:25px;border-collapse:collapse;}.doubleStyle{margin:0000; padding:0000;border: solid1px#ffffff;background-color: #FEFEFE;text-align: left;vertical-align: middle;cursor: default;font-size: 12px;height:25px;border-collapse:collapse;}.mouseOnStyle{margin:0000; padding:0000;border: solid1px#000000;background-color: #f6f6f6;text-align: left;vertical-align: middle;cursor: default;font-size: 12px;height:25px;}</style></head><body><div style='width: 100%; height: 300px; background-color:white; vertical-align:middle;padding:5px;text-align: center;'onclick='dealShowMenu()'>单击此处开始测试</div><table id="table_ShowInfo"style="margin-top:30px;border-width:1px;border-collapse:collapse;bo rder-color:Green;"border="1"cellpadding="2"cellspacing="0"borderColor="red"><tr><td>单元格11</td><td>单元格12</td></tr><tr><td>单元格21</td><td>单元格22</td></tr></table></body></html>2.JS代码<script type="text/javascript">function dealShowMenu() {var content = getMenuDivHTML();menuParamObj = { sTime: '20111106', eTime: '20111206' }; //绘制菜单前可以传递一个object类型参数，这样在菜单项单击后可以通过menuItemParamObj来访问此参数showMenu("选择菜单项", content, true,false,200, 50, window.event);}function showMenu(title, contentHTML, isCursorRelated,isShowTitleBar,width, height, event) { ShowHtmlString(title, contentHTML, isCursorRelated,isShowTitleBar,width, height, event); //调用的是popup.js里的方法}function getMenuDivHTML() {var containerHTML = "<table style='margin:0 0 0 0;width:100%;font-size:12px;' cellspacing='0' cellpadding='0' id='div_RightMenu'>";menuItemList = [{ text: "弹出警告框", clickFunc:"window.parent.menuItem_1_ClickHandler(0,'弹出警告框')", img: "images/table/sz1.gif" },{ text: "弹出确认框", clickFunc:"window.parent.menuItem_2_ClickHandler(1,'弹出确认框')", img: "images/table/fdj.gif" },{ text: "弹出HTML框", clickFunc:"window.parent.menuItem_3_ClickHandler(1,'弹出HTML')", img: "images/table/zq.gif" },{ text: "弹出对话框", clickFunc:"window.parent.menuItem_4_ClickHandler(1,'弹出对话框')", img: "images/table/sz2.gif" },{ text: "取消操作", clickFunc: "ClosePop();", img:"images/table/qx.gif"}];for (var i = 0; i < menuItemList.length; i++) {if (i % 2 == 0) {containerHTML += "<tr class='doubleStyle'onmouseover='this.className=\"mouseOnStyle\";' onmouseout='this.className=\"doubleStyle\";' style=\"cursor:pointer;vertical-align:middle;" + (i < menuItemList.length - 1 ?"border-bottom:none;" : "") + "\" onclick=\"" + menuItemList[i].clickFunc + "\" ><tdstyle='width:25px;text-align:right;border-right:1px solid #EEEEEE;padding:2px' ><img src='" + menuItemList[i].img + "' style='' /></td><td style='vertical-align:middle;padding:3px;'>" + menuItemList[i].text + "</td></tr>";}else {containerHTML += "<tr class='singleStyle'onmouseover='this.className=\"mouseOnStyle\";' onmouseout='this.className=\"singleStyle\";' style=\"cursor:pointer;vertical-align:middle;" + (i < menuItemList.length - 1 ?"border-bottom:none;" : "") + "\" onclick=\"" + menuItemList[i].clickFunc + "\" ><tdstyle='width:25px;text-align:right;border-right:1px solid #EEEEEE;padding:2px;' ><img src='"+ menuItemList[i].img + "' style='' /></td><td style='vertical-align:middle;padding:3px;'>" + menuItemList[i].text + "</td></tr>";}}containerHTML += "</table>";return containerHTML;}var hasMenuItemClicked = false;var menuParamObj = undefined; //菜单绘制参数var menuItemParamObj = { itemIndex: undefined, itemText: undefined, param: undefined }; //菜单项单击事件参数function menuItem_1_ClickHandler(index, text) {menuItemParamObj.itemIndex = index; menuItemParamObj.itemText =text;menuItemParamObj.param = menuParamObj;hasMenuItemClicked = true;ShowAlert("系统警告", getJSONString(menuItemParamObj),"知道了",300,100,window.event); //调用的是popup.js里的方法// ClosePop(); //调用的是popup.js里的方法}function menuItem_2_ClickHandler(index, text) {menuItemParamObj.itemIndex = index; menuItemParamObj.itemText = text; menuItemParamObj.param = menuParamObj;hasMenuItemClicked = true;ShowConfirm("系统确认", "下面的内容是正确的吗?<br/>" +getJSONString(menuItemParamObj), "okListener", "确定", null, "cancelListener", "取消", null, 300, 120, window.event); //调用的是popup.js里的方法// ClosePop(); //调用的是popup.js里的方法}function menuItem_3_ClickHandler(index, text) {menuItemParamObj.itemIndex = index; menuItemParamObj.itemText = text; menuItemParamObj.param = menuParamObj;hasMenuItemClicked = true;ShowHtmlString("系统HTML框", table_ShowInfo.outerHTML, false, true, 300, 120, window.event); //调用的是popup.js里的方法// ClosePop(); //调用的是popup.js里的方法}function menuItem_4_ClickHandler(index, text) {menuItemParamObj.itemIndex = index; menuItemParamObj.itemText = text; menuItemParamObj.param = menuParamObj;hasMenuItemClicked = true;ShowIframe("系统登录对话框", "demo.htm", 300, 120, window.event); //调用的是popup.js 里的方法// ClosePop(); //调用的是popup.js里的方法}function getJSONString(value) {return value.toJSONString();}</script><script type="text/javascript">if (!Object.prototype.toJSONString) {Array.prototype.toJSONString = function() {var a = [], // The array holding the partial texts.i, // Loop counter.l = this.length,v; // The value to be stringified.// For each value in this array...for (i = 0; i < l; i += 1) {v = this[i];switch (typeof v) {case'object':// Serialize a JavaScript object value. Ignore objects thats lack the // toJSONString method. Due to a specification error in ECMAScript, // typeof null is 'object', so watch out for that case.if (v) {if (typeof v.toJSONString === 'function') {a.push(v.toJSONString());}} else {a.push('null');}break;case'string':case'number':case'boolean':a.push(v.toJSONString());// Values without a JSON representation are ignored.}}// Join all of the member texts together and wrap them in brackets.return'[' + a.join(',') + ']';};Boolean.prototype.toJSONString = function() {return String(this);};Date.prototype.toJSONString = function() {// Eventually, this method will be based on the date.toISOString method. function f(n) {// Format integers to have at least two digits.return n < 10 ? '0' + n : n;}return'"' + this.getUTCFullYear() + '-' +f(this.getUTCMonth() + 1) + '-' +f(this.getUTCDate()) + 'T' +f(this.getUTCHours()) + ':' +f(this.getUTCMinutes()) + ':' +f(this.getUTCSeconds()) + 'Z"';};Number.prototype.toJSONString = function() {// JSON numbers must be finite. Encode non-finite numbers as null.return isFinite(this) ? String(this) : 'null';};Object.prototype.toJSONString = function() {var a = [], // The array holding the partial texts.k, // The current key.v; // The current value.// Iterate through all of the keys in the object, ignoring the proto chain// and keys that are not strings.for (k inthis) {if (typeof k === 'string'&&Object.prototype.hasOwnProperty.apply(this, [k])) {v = this[k];switch (typeof v) {case'object':// Serialize a JavaScript object value. Ignore objects that lack the// toJSONString method. Due to a specification error in ECMAScript,// typeof null is 'object', so watch out for that case.if (v) {if (typeof v.toJSONString === 'function') {a.push(k.toJSONString() + ':' + v.toJSONString()); }} else {a.push(k.toJSONString() + ':null');}break;case'string':case'number':case'boolean':a.push(k.toJSONString() + ':' + v.toJSONString());// Values without a JSON representation are ignored.}}}// Join all of the member texts together and wrap them in braces.return'{' + a.join(',') + '}';};(function(s) {// Augment String.prototype. We do this in an immediate anonymous function to // avoid defining global variables.// m is a table of character substitutions.var m = {'\b': '\\b','\t': '\\t','\n': '\\n','\f': '\\f','\r': '\\r','"': '\\"','\\': '\\\\'};s.parseJSON = function(filter) {var j;function walk(k, v) {var i;if (v &&typeof v === 'object') {for (i in v) {if (Object.prototype.hasOwnProperty.apply(v, [i])) {v[i] = walk(i, v[i]);}}}return filter(k, v);}// Parsing happens in three stages. In the first stage, we run the text against // a regular expression which looks for non-JSON characters. We are especially // concerned with '()' and 'new' because they can cause invocation, and '='// because it can cause mutation. But just to be safe, we will reject all// unexpected characters.// We split the first stage into 3 regexp operations in order to work around// crippling deficiencies in Safari's regexp engine. First we replace all// backslash pairs with '@' (a non-JSON character). Second we delete all of// the string literals. Third, we look to see if only JSON characters// remain. If so, then the text is safe for eval.if (/^[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]*$/.test(this.replace(/\\./g, '@').replace(/"[^"\\\n\r]*"/g, ''))) {// In the second stage we use the eval function to compile the text into a// JavaScript structure. The '{' operator is subject to a syntactic ambiguity // in JavaScript: it can begin a block or an object literal. We wrap the text // in parens to eliminate the ambiguity.j = eval('(' + this + ')');// In the optional third stage, we recursively walk the new structure, passing // each name/value pair to a filter function for possible transformation.returntypeof filter === 'function' ? walk('', j) : j;}// If the text is not JSON parseable, then a SyntaxError is thrown.thrownew SyntaxError('parseJSON');};s.toJSONString = function() {// If the string contains no control characters, no quote characters, and no // backslash characters, then we can simply slap some quotes around it.// Otherwise we must also replace the offending characters with safe// sequences.if (/["\\\x00-\x1f]/.test(this)) {return'"' + this.replace(/[\x00-\x1f\\"]/g, function(a) {var c = m[a];if (c) {return c;}c = a.charCodeAt();return'\\u00' +Math.floor(c / 16).toString(16) +(c % 16).toString(16);}) + '"';}return'"' + this + '"';};})(String.prototype);}</script>3.Popup.jsvar pop =null;function ShowIframe(title, contentUrl, width, height, event){pop = new Popup({ contentType: 1, isReloadOnClose: false, width: width, height: height, event: event });pop.setContent("contentUrl",contentUrl);pop.setContent("title",title);pop.build();pop.show();}function ShowHtmlString(title, strHtml, isCursorRelative, isShowTitleBar,width, height,event) {pop = new Popup({ contentType: 2, isReloadOnClose: false, isCursorRelative: isCursorRelative, isShowTitleBar:isShowTitleBar, width: width, height: height, event:event }); pop.setContent("contentHtml",strHtml);pop.setContent("title",title);pop.build();pop.show();}function ShowConfirm(title, confirmCon, okListenerId, okButtonText, okParam, cancelListenerId, cancelButtonText, cancelParam, width, height, event){var pop=newPopup({ contentType:3,isReloadOnClose:false,width:width,height:height,event:event});pop.setContent("title",title);pop.setContent("confirmCon",confirmCon);pop.setContent("okCallBack", OKCallBack);pop.setContent("okListenerParameter", { listenerid: okListenerId, param: okParam, popObj: pop }); //添加确认框与外围交互的参数,str为备用参数pop.setContent("okButtonText", okButtonText);pop.setContent("cancelCallBack", CancelCallBack);pop.setContent("cancelListenerParameter", { listenerid: cancelListenerId, param: cancelParam, popObj: pop }); //添加确认框与外围交互的参数,str为备用参数pop.setContent("cancelButtonText", cancelButtonText);pop.build();pop.show();}//确认框“确定”按钮回调function OKCallBack(para) {var popObj = para["popObj"]var listener = document.getElementById(para["listenerid"]);popObj.close();if (listener != null) window.document.fireEvent("onclick",listener);}//确认框“取消”按钮回调function CancelCallBack(para) {var popObj = para["popObj"]var listener = document.getElementById(para["listenerid"]);popObj.close();if (listener != null) window.document.fireEvent("onclick", listener);}function ShowAlert(title, alertCon, yesButtonText, width, height, event){pop = new Popup({ contentType: 4, isReloadOnClose: false, width: width, height: height, event: event });pop.setContent("title",title);pop.setContent("alertCon", alertCon);pop.setContent("yesButtonText", yesButtonText);pop.build();pop.show();}//关闭弹出框function ClosePop(){if(pop != null)pop.close();}4.popoupclass.jsif (!Array.prototype.push) {Array.prototype.push = function() {var startLength = this.length;for (var i = 0; i < arguments.length; i++) this[startLength + i] = arguments[i]; returnthis.length}};function G() {var elements = new Array();for (var i = 0; i < arguments.length; i++) {var element = arguments[i];if (typeof element == 'string') element = document.getElementById(element);if (arguments.length == 1) return element;elements.push(element)};return elements};Function.prototype.bind = function(object) {var __method = this;returnfunction() {__method.apply(object, arguments)}};Function.prototype.bindAsEventListener = function(object) {var __method = this;returnfunction(event) {__method.call(object, event || window.event)}};Object.extend = function(destination, source) {for (property in source) {destination[property] = source[property]};return destination};if (!window.Event) {var Event = new Object()};Object.extend(Event,{observers: false, element: function(event) {return event.target || event.srcElement}, isLeftClick: function(event) {return (((event.which) && (event.which == 1)) || ((event.button) && (event.button == 1))) }, pointerX: function(event) {return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))}, pointerY: function(event) {return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))}, stop: function(event) {if (event.preventDefault) {event.preventDefault();event.stopPropagation()}else {event.returnValue = false;event.cancelBubble = true}}, findElement: function(event, tagName) {var element = Event.element(event);while (element.parentNode && (!element.tagName || (element.tagName.toUpperCase() != tagName.toUpperCase()))) element = element.parentNode;return element}, _observeAndCache: function(element, name, observer, useCapture) {if (!this.observers) this.observers = [];if (element.addEventListener) {this.observers.push([element, name, observer, useCapture]);element.addEventListener(name, observer, useCapture)}elseif (element.attachEvent) {this.observers.push([element, name, observer, useCapture]);element.attachEvent('on' + name, observer)}}, unloadCache: function() {if (!Event.observers) return;for (var i = 0; i < Event.observers.length; i++) {Event.stopObserving.apply(this, Event.observers[i]);Event.observers[i][0] = null};Event.observers = false}, observe: function(element, name, observer, useCapture) {var element = G(element);useCapture = useCapture || false;if (name == 'keypress'&& (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || element.attachEvent)) name = 'keydown';if(element != null)this._observeAndCache(element, name, observer, useCapture)}, stopObserving: function(element, name, observer, useCapture) {var element = G(element);useCapture = useCapture || false;if (name == 'keypress'&& (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || element.detachEvent)) name = 'keydown';if (element.removeEventListener) {element.removeEventListener(name, observer, useCapture)}elseif (element.detachEvent) {element.detachEvent('on' + name, observer)}}});Event.observe(window, 'unload', Event.unloadCache, false);var Class = function() {var _class = function() {this.initialize.apply(this, arguments)};for (i = 0; i < arguments.length; i++) {superClass = arguments[i];for (member in superClass.prototype) {_class.prototype[member] = superClass.prototype[member]}};_class.child = function() {returnnew Class(this)};_class.extend = function(f) {for (property in f) {_class.prototype[property] = f[property]}};return _class};function space(flag) {if (flag == "begin") {var ele = document.getElementById("ft");if (typeof (ele) != "undefined"&& ele != null) ele.id = "ft_popup";ele = document.getElementById("usrbar");if (typeof (ele) != "undefined"&& ele != null) ele.id = "usrbar_popup"}elseif (flag == "end") {var ele = document.getElementById("ft_popup");if (typeof (ele) != "undefined"&& ele != null) ele.id = "ft";ele = document.getElementById("usrbar_popup");if (typeof (ele) != "undefined"&& ele != null) ele.id = "usrbar"}};var Popup = new Class();Popup.prototype ={iframeIdName: 'ifr_popup', initialize: function(config) {this.config = Object.extend({contentType: 1, isHaveTitle: true, scrollType: 'auto', isBackgroundCanClick: false, isSupportDraging: true, isShowShadow: true, isReloadOnClose: true, isCursorRelative: false, isShowTitleBar: true, width: 400, height: 300, event: undefined}, config ||{}); ={shadowWidth: 0, title: "", contentUrl: "", contentHtml: "", callBack: null, parameter: null, confirmCon: "", alertCon: "", someHiddenTag: "select,object,embed", someDisabledBtn: "", someHiddenEle: "", overlay: 0, coverOpacity: 40};this.color ={cColor: "#EEEEEE", bColor: "#FFFFFF", tColor: "#C8C8C8", wColor: "#FFFFFF" };this.dropClass = null;this.someToHidden = [];this.someToDisabled = [];if (!this.config.isHaveTitle) this.config.isSupportDraging = false;this.iniBuild()}, setContent: function(arrt, val) {if (val != '') {switch (arrt) {case'width': this.config.width = val;break;case'height': this.config.height = val;break;case'title': .title = val;break;case'contentUrl': .contentUrl = val;break;case'contentHtml': .contentHtml = val;break;case'okCallBack': .okCallBack = val;break;case'cancelCallBack': .cancelCallBack = val;break;case'okListenerParameter': .okListenerParameter = val;break;case'cancelListenerParameter': .cancelListenerParameter = val;break;case'confirmCon': .confirmCon = val;break;case'okButtonText': .okButtonText = val;break;case'cancelButtonText': .cancelButtonText = val;break;case'alertCon': .alertCon = val;break;case'yesButtonText': .yesButtonText = val;break;case'someHiddenTag': .someHiddenTag = val;break;case'someHiddenEle': .someHiddenEle = val;break;case'someDisabledBtn': .someDisabledBtn = val;break;case'overlay': .overlay = val}}}, iniBuild: function() {G('dialogCase') ? G('dialogCase').parentNode.removeChild(G('dialogCase')) : function() {};var oDiv = document.createElement('span');oDiv.id = 'dialogCase';document.body.appendChild(oDiv)}, build: function() {var baseZIndex = 10001 + .overlay * 10;var showZIndex = baseZIndex + 2;this.iframeIdName = 'ifr_popup' + .overlay;var close = '<img id="dialogBoxClose" src="images/closewin.gif" border="0" width="15px" height="15px" align="absmiddle" title="关闭"/>';var cB = 'filter: alpha(opacity=' + .coverOpacity + ');opacity:' +.coverOpacity / 100 + ';';var cover = '<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:' + document.body.clientWidth + 'px;height:' + document.body.cientHeight + 'px;z-index:' + baseZIndex + ';' + cB + 'background-color:' + olor + ';display:none;"></div>'; var mainBox = '<div id="dialogBox" style="border:1px solid ' + this.color.tColor +';display:none;z-index:' + showZIndex + ';position:relative;width:' + this.config.width +'px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="' +this.color.bColor + '">';if (this.config.isShowTitleBar) {if (this.config.isHaveTitle) {mainBox += '<tr height="24" bgcolor="'+ this.color.tColor + '"><td><table style="-moz-user-select:none;height:24px;margin-top:0px;" width="100%" border="0" cellpadding="0" cellspacing="0" ><tr>' + '<td width="6" height="24"></td><tdid="dialogBoxTitle" style="color:' + this.color.wColor + ';font-size:12px;padding-top:3px;">' + .title + ' </td>' + '<td id="dialogClose" width="20" align="right"valign="middle">' + close + '</td><td width="6"></td></tr></table></td></tr>'}else {mainBox += '<tr height="10"><td align="right">' + close + '</td></tr>' };}mainBox += '<tr style="height:' + this.config.height + 'px" valign="top"><tdid="dialogBody" style="position:relative;"></td></tr></table></div>' + '<divid="dialogBoxShadow" style="display:none;z-index:' + baseZIndex + ';"></div>';if (!this.config.isBackgroundCanClick) {G('dialogCase').innerHTML = cover + mainBox;G('dialogBoxBG').style.height = document.body.scrollHeight}else G('dialogCase').innerHTML = mainBox;Event.observe(G('dialogBoxClose'), "click",this.reset.bindAsEventListener(this), false);if (this.config.isSupportDraging) {dropClass = new Dragdrop(this.config.width, this.config.height,.shadowWidth, this.config.isSupportDraging, this.config.contentType);if (G("dialogBoxTitle") != null) G("dialogBoxTitle").style.cursor = "move"};stBuild()}, lastBuild: function() {var confirm = '<div style="width:100%;height:100%;text-align:center;"><div style="margin:10px 10px 0 10px;font-size:14px;line-height:16px;color:#000000;text-align:left;">' +.confirmCon + '</div><div style="margin:10px;"><input id="dialogOk"style="padding-left:5px;padding-right:5px;" type="button" value="' + .okButtonText + '"/> <input id="dialogCancel" style="padding-left:5px;padding-right:5px;" type="button" value="' + .cancelButtonText + '"/></div></div>';var alert = '<div style="width:100%;height:100%;text-align:center;"><div style="margin:10px 10px 0 10px;font-size:14px;line-height:16px;color:#000000;text-align:left;">' +.alertCon + '</div><div style="margin:10px;"><input id="dialogYES"style="padding-left:5px;padding-right:5px;" type="button" value="'+ .yesButtonText + '"/></div></div>';var baseZIndex = 10001 + .overlay * 10;var coverIfZIndex = baseZIndex + 4;if (this.config.contentType == 1) {var openIframe = "<iframe width='100%' style='height:" + this.config.height + "px' name='" + this.iframeIdName + "' id='" + this.iframeIdName + "' src='" + .contentUrl + "' frameborder='0' scrolling='" + this.config.scrollType + "'></iframe>";var coverIframe = "<div id='iframeBG'style='position:absolute;top:0px;left:0px;width:1px;height:1px;z-index:" + coverIfZIndex + ";filter: alpha(opacity=00);opacity:0.00;background-color:#ffffff;'><div>";G("dialogBody").innerHTML = openIframe + coverIframe}elseif (this.config.contentType == 2) {G("dialogBody").innerHTML = .contentHtml}elseif (this.config.contentType == 3) {G("dialogBody").innerHTML = confirm;Event.observe(G('dialogOk'), "click",this.forOKCallback.bindAsEventListener(this), false);Event.observe(G('dialogCancel'), "click",this.forCancelCallback.bindAsEventListener(this), false)}elseif (this.config.contentType == 4) {G("dialogBody").innerHTML = alert;Event.observe(G('dialogYES'), "click", this.close.bindAsEventListener(this), false)}}, reBuild: function() {G('dialogBody').height = G('dialogBody').clientHeight;。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<h2>js弹出对话框3种方式对话框有三种</h2>
<p>1：只是提醒，不能对脚本产生任何改变；</p>
<p>2：一般用于确认，返回true 或者false ，所以可以轻松用于if...else...判断</p>
<p>3：一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的插入UBB格式图片</p>
<p>下面我们分别演示：</p>
<p>@LANGUAGE="JA V ASCRIPT" CODEPAGE="936"%<br>
<br>
<br></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>对话框有三种</p>
<br>
<p>1：只是提醒，不能对脚本产生任何改变；</p>
<br>
<p>2：一般用于确认，返回true 或者false ，所以可以轻松用于
if    
else    
判断</p>
<br>
<p>3：一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的插入UBB格式图片</p>
<br>
<p>下面我们分别演示：</p>
<br>
<p>演示一：提醒对话框</p>
<br>
<p><br>
   <input name="Submit" value="提交" type="submit"><br></p>
<br>
<p>演示二：确认对话框</p>
<br>
<p><br>
   <input name="Submit2" value="提交" type="submit"><br></p>
<br>
<p>演示三：要求用户输入，然后给个结果</p>
<br>
<p><br>
   <input name="Submit3" value="提交" type="submit"><br></p>
<br>
<p>======</p>
<p>首先我想先说两句我对javascript的一些看法，我希望大家认真的去学习这门编程语言，因为它给我们在开发网页时，会带来很多的惊
喜！javascript一般是运行在客户端的(client)，主要用于开发一些网页中的动态效果，其实它的用处还有很多，比如验证表单内容，以及现在
比较流行的ＡＪＡＸ应用．</p>
<p>今天主要写一下javascript中的弹出对话框：</p>
<p>第一种：alert("message")</p>
<p>   
第二种：confirm("message")</p>
<p>   
第三钟：prompt("message")</p>
<p>   
第四种：open("url")</p>
<p>
    
第一种alert对话框是一个最简单，也是最常用的一个弹出对话框，通常用于提示信息，对话框包含一个按钮，单击对话框中的按钮将会关闭此对话框．</p>
<p>
第二种confirm对话框返回的是一个布尔值，该对话框一般用于用户选择，该对话框包含两个按钮，一般一个是＂确认＂，另一个是＂取消＂,比如我们
在开发程序的时候，创建一个删除按钮，为了防止用户务操作，一般就会用到这个对话框：＂您确定删除吗？＂如果选择＂确定＂，执行删除，如果选择＂取消＂，
则返回，不做任何操作！</p>
<p>第三种prompt对话框，主要用户获取用户输入的信息，比如，弹出一个对话框:</p> <p></p>
<p>prompt对话框包括两个按钮（＂确认＂和＂取消＂）和一个文本框，文本框用来获取用户输入的信息．</p>
<p>第四种其实是一种用对话框的方式打开一个网页,open方法包含很多的参数，主要是用户设置浏览器的显示外观：</p>
<p>
window.open("Webpage.asp?",Derek,"height=100,width=100,status=yes,toolbar=yes,<br>
menubar=no,location=no");<br>
此语句打开一个新窗口，页面为webpage.asp，参数为var，名字为Derek，高为100，宽为100，显示状态栏和工具条，不显示菜单和地址。

<br>
<br>
具体总结的各个属性参数如下：<br>
window = object.open([URL ][, name ][, features ][,
replace]]]])<br>
URL：新窗口的URL地址<br>
name：新窗口的名称，可以为空<br>
featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。

<br> fullscreen= { yes/no/1/0 } 是否全屏，默认no<br>
channelmode= { yes/no/1/0 } 是否显示频道栏，默认no<br>
toolbar= { yes/no/1/0 } 是否显示工具条，默认no<br>
location= { yes/no/1/0 } 是否显示地址栏，默认no<br>
directories = { yes/no/1/0 } 是否显示转向按钮，默认no<br>
status= { yes/no/1/0 } 是否显示窗口状态条，默认no<br>
menubar= { yes/no/1/0 } 是否显示菜单，默认no<br>
scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes<br>
resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no<br>
width=number 窗口宽度（像素单位）<br>
height=number 窗口高度（像素单位）<br>
top=number 窗口离屏幕顶部距离（像素单位）<br>
left=number 窗口离屏幕左边距离（像素单位）</p>。