JavaScript自定义模式对话框
JavaScript自定义模式对话框
更新日期：2006-09-19 10:03 网页教学网
<script language=javascript>
function openDialogWin()
{
var result = window.showModalDialog("ShowMessage.aspx","","dialogHeight:160px; dialogWidth:300px; status:no; help:no; scroll:no");
//window.show('ShowMessage.aspx', '','height=300, width=400, top=250, left=250, too lbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no','_blank');
if(result == "Yes")
window.alert("You Clicked Yes!");
else if(result == "No")
window.alert("You Clicked No!");
//document.writeln(result);
}
</script><input type=button value="按钮" name="btn" onclick="openDialogWin()"
/> Response.Write("<script language='javascript'>");
Response.Write("function confirm(){ window.returnValue='Yes';window.close(); }");
Response.Write("function cancel(){ window.returnValue='No';window.close(); }");
Response.Write("</script>");
Response.Write("<div align='center'><input type='button' value='Yes' onclick='confirm ()' /><input type='button' value='No' onclick='cancel()' /></div>");。
js中trigger的用法
js中trigger的用法一、什么是trigger？Trigger是JavaScript中的一个方法，它可以通过模拟用户事件来触发元素上的事件处理程序。
在某些情况下，触发器可以帮助我们模拟用户交互并自动执行一些操作。
二、trigger的语法在JavaScript中，使用trigger方法需要指定两个参数：要触发的事件类型和要传递给事件处理程序的数据对象（可选）。
语法如下：$(selector).trigger(eventType,[,extraParameters])其中，selector表示要触发事件的元素选择器；eventType表示要触发的事件类型，比如click、mouseover等；extraParameters是一个可选参数，它可以传递给事件处理程序。
三、trigger的使用场景1. 模拟用户交互当我们需要模拟用户行为时，可以使用trigger方法来实现。
比如说，在自动化测试中，我们需要测试一个表单是否能够正确地提交数据。
这时候就可以使用trigger方法来模拟用户点击提交按钮，并验证表单是否成功提交。
2. 触发自定义事件除了浏览器原生支持的事件类型外，我们也可以通过jQuery自定义一些事件类型，并使用trigger方法来触发这些自定义事件。
比如说，在一个网页应用中，我们可能需要监听一个名为"customEvent"的自定义事件，并在该事件被触发时执行一些操作。
这时候就可以使用trigger方法来手动触发该自定义事件。
3. 与其他插件配合使用在一些jQuery插件中，我们可能需要手动触发某个事件来实现一些特定的功能。
比如说，在jQuery UI的sortable插件中，我们需要手动触发"sortstop"事件来通知该插件排序已经完成。
四、trigger的实例1. 模拟点击事件在下面的示例中，我们创建了一个按钮，并为其绑定了一个点击事件。
当用户点击按钮时，会弹出一个对话框。
JavaScript自定义模拟alert弹出提示框–编码工具
JavaScript 自定义模拟alert 弹出提示框–编码工具使用jQuery ，模拟弹出框alert ，样式模仿iphone 的弹出框，兼容手机、ie 、火狐、chome 等浏览器。
效果如下：主要使用jQuery 的resize 和scroll 事件，每当滑动浏览器的滚动条，或者页面重新缩放时，重新定位弹出框的位置，使对话框能够位于页面的正中间：JavaScript1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 MyJqDialog.prototype.resizeBox = function () {var box = this.element;//Get the screen height and widthvar maskHeight = $(document).height();var maskWidth = $(document).width();//Set height and width to mask to fill up the whole screen $(this.overlay).css({'width':maskWidth,'height':maskHeight}); //Get the window height and widthvar winH = $(window).height();var winW = $(window).width();var scrollT = $(window).scrollTop();var scrollL = $(window).scrollLeft();//Set the popup window to centerbox.css('top', winH/2 - box.height()/2 + scrollT);box.css('left', winW/2 - box.width()/2 + scrollL);};17181920再配合css 样式。
[Javascript]40个轻量级JavaScript脚本库
![[Javascript]40个轻量级JavaScript脚本库](https://360docs-1393072327.cos.ap-beijing.myqcloud.com/860a35aff021dd36a32d7375a417866fb84ac06e.webp)
[Javascript]40个轻量级JavaScript脚本库诸如, , , 和等JavaScript脚本库，⼤家都已经很熟悉。
但这些脚本库有利也有弊——⽐如说JavaScript⽂件过⼤的问题。
有时你可能会愿意采⽤⼀些体积⼩巧、专注于特定任务的JavaScript脚本库。
以下是40个轻量级的JavaScript脚本库。
供每位⽹页设计师和程序员作参考。
1. 表单wForms 是⼀个开源的、⽆⼊侵的(unobstrusive)注*代码库，能够简化⼤部分与表单相关的常⽤JavaScript函数。
它能对表单的⽤户输⼊值进⾏验证，只需为表单元素添加⼀个特定的类即可使⽤。
另外，wForms 还具有强⼤的表单同步（例如“全选/全不选”）和条件表单（如，当x被选择则显⽰y）功能。
Validanguage 是⼀个⽆⼊侵的 JavaScript表单验证框架。
它有⼀个继承逻辑，可以全局定义，也可以对每个表单或每个元素分别定义。
利⽤作者提供的两个API，以及诸如综合的AJAX⽀持(integrated AJAX support)、缓存和调⽤函数等特性，该框架可以提供强健的(robust)验证体验。
两个API⽤以⾼级设置，分别是加在注释⾥的像HTML语⾔的 API和基于JavaScript对象的API。
LiveValidation是⼀个轻量级的JavaScript脚本库，提供⼀系列验证函数。
除了经典验证法，此库还具有实时验证(live validation)特性，能根据你键⼊的⽂字实时控制特定区域。
Ruby on Rails的开发者会发现LiveValidation异常好⽤，因为⼆者的命名规范和参数设置⾮常相似。
虽然它是独⽴库，不过也有⼀个Prototype版注*。
⼀个功能强⼤、可扩展、使⽤灵活的表单验证代码库。
yav可处理多种情况，从⽇期、email、整数之类的基本验证到和⾃定义正则表达式之类的⾼级应⽤，都得⼼应⼿。
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中window对象的open和openDialog方法使用
弹出窗口控制-window.open()弹出窗口控制-CSS+DIV弹出窗口控制-网页对话框2009-03-29 15:46分类：javaScript字号：大中小这里说的网页对话框是指通过脚本代码打开一个新的窗口，并且该窗口可以有返回值。
网页对话框分为网页模式对话框和网页非模式对话框。
（模式和非模式的区别我在这里就不赘述了）。
下面我们只针对网页模式对话框进行说明:弹出网页模式对话框:格式:var somevalue=window.showModalDialog(url[,Arguments[,Features]]);参数说明:url :指定url文件地址。
Argument :用于向网页对话框传递参数，传递参数的类型不限制，对于字符串类型，最大为4096字符。
也可以传递对象。
如index.html.在弹出的窗口中可通过var parameter=window.dialogArguments;获取传递来的参数。
Features:可选项。
窗口对话框的设置参数。
主要参数如下表:参数说明dialogWidth :number用于设置对话框的宽度dialogHeight :number用于设置对话框的高度dialogTop :number用于设置对话框窗口相对于桌面左上角的top位置dialogLeft :number用于设置对话框窗口相对于桌面左侧的left位置center :{yes|no|1|0}用于指定是否将对话框在桌面上居中，yes|1为居中，默认值为yesHelp :{yes|no 1|0}用于指定对话框窗口中是否显示上下文敏感的帮助图标。
默认为yesscroll :{yes|no 1|0}用于指定对话框中是否显示滚动条示例:说明:点击按钮后打开一网页模式对话框。
在网页对话框中选择一个值后关闭该模式对话框。
并将返回值传递到父窗口中。
如下:<script language="javascript">function openDialog(){var somevalue=window.openModalDialog("test.jsp","","dialogWidth=400p x;dialogHeight=300px;help=no;status=no")erName=somevalue;}在弹出的模式对话框中调用一个js函数向打开的窗口返回信息function action(user){parent.window.returnValue=user;window.close();}流程:通过window.openModalDialog()打开一模式窗口，在打开的窗口中调用action()函数将返回值传递给打开的对话框。
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返回的字符串转换为整数，然后与预设的数字相加，得到最终的结果。
javascript中alert写法
javascript中alert写法
在JavaScript中，`alert` 是一个用于显示简单提示框的方法。
它通常用于向用户显示一些信息或警告。
以下是`alert` 的基本用法：
```javascript
alert("这是一条提示信息");
```
在这个例子中，当这行代码执行时，会在用户的浏览器中显示一个包含指定文本的提示框。
你也可以将变量的值或表达式的结果显示在`alert` 中：
```javascript
var message = "Hello, World!";
alert(message);
```
或者直接在`alert` 中使用表达式：
```javascript
alert("2 + 2 的结果是：" + (2 + 2));
```
请注意，`alert` 主要用于调试目的或者在需要引起用户注意的情况下使用，因为它会中断用户的操作，直到用户关闭提示框。
在实际应用中，你可能更倾向于使用更灵活的界面元素，比如模态框或者自定义的弹出框。
javascript网页对话框
2008-12-31Javascript 弹出窗口总结(收集)Javascript 弹出窗口总结1: window.open<!--window.open('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')//写成一行-->参数解释：window.open 弹出新窗口的命令；'page.html' 弹出窗口的文件名；'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；height=100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；location=no 是否显示地址栏，yes为允许；status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；2: showModalDialog()、showModelessDialog()(1) window.showModalDialog() 模态对话框模态对话框始终有焦点（焦点不可移走，直到它关闭）。
(2) window.showModelessDialog() 非模态对话框由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。
ExtJs基础知识总结：自定义弹窗和ComboBox自动联想加载（四）
ExtJs基础知识总结：⾃定义弹窗和ComboBox⾃动联想加载（四） Extjs弹窗可以分为消息弹窗、对话框，这些弹窗的⽅式ExtJs⾃带的Ext.Msg.alert就已经可以满⾜简单消息提⽰，但是相对复杂的提⽰，⽐如如何将Ext.grid.Panel的控件显⽰嵌套到widget.window，然后随着widget.window的show⽅法展⽰到页⾯上哪？另外⼀个就是ExtJs中的Combobox下拉控件，如何做到⼿动输⼊，⾃动联想⼿动输⼊的内容进⾏查询？ 通过window显⽰⾃定义弹窗，下⾯有⼏种⽅案思路思路⼀、直接将gridpandel填充到widget.window对应的Items 代码如下：var InvoiceItemGrid = Ext.create('Ext.grid.Panel', {forceFit: false,autoHeight: true,autoScroll: true,frame: true,split: false,layout: "fit",height:document.documentElement.clientHeight,margin: 0,store: PrecStore,loadMask: { msg: '数据加载中...' },columnLines: true,//dockedItems: [PTxtInfo],//selType: "checkboxmodel",selModel: {mode: "multi",//multi,simple,single；默认为多选multicheckOnly: false,//如果值为true，则只⽤点击checkbox列才能选中此条记录allowDeselect: true,//如果值true，并且mode值为单选（single）时，可以通过点击checkbox取消对其的选择},viewConfig: {stripeRows: true,//在表格中显⽰斑马线enableTextSelection: true//可以复制单元格⽂字 "GGXH", "XMSL", "XMDJ", "XMJE", "SL", "SE", "SPBM", "TaxItem"],},bbar: { xtype: "pagingtoolbar", inputItemWidth: 100, store: PrecStore, displayInfo: true },columns: [{ text: "Id", width: 80, dataIndex: "Id", hidden: true },{ text: "商品名称", width: 80, dataIndex: "XMMC" },{ text: "单位", width: 80, dataIndex: "DW" },{ text: "规格型号", width: 120, dataIndex: "GGXH" },{ text: "数量", width: 80, dataIndex: "XMSL" },{ text: "项⽬单价", width: 120, dataIndex: "XMDJ" },{ text: "项⽬⾦额", width: 80, dataIndex: "XMJE" },{ text: "税额", width: 80, dataIndex: "SE" },{ text: "税率%", width: 80, dataIndex: "SL" },{ text: "税⽬编码", width: 160, dataIndex: "SPBM" },]});//主窗体var WindItem= Ext.create('widget.window', {title: '发票明细',closable: true,closeAction: 'hide',modal: true,frame: true,layout: 'fit',width: 895,minWidth: 895,height: 430,layout: {type: 'border',padding: 2},items: [InvoiceItemGrid]});显⽰的结果截图如下：结果分析：grid的标题也没显⽰出来，⽽且随着窗体⼤⼩的拉伸，内容不会全部显⽰。
JavaScript封装对话框代替系统alert功能
JavaScript封装对话框代替系统alert功能我们在使用Javascript编写网页代码时经常会使用alert功能，用来显示各种提示信息，虽然alert非常好用，但是也很难看，而且在各个浏览器中的显示也不相同。
这是在chrome中的显示（位于屏幕中上部）：这是IE8.0中的显示（位于屏幕的中间）：这是Firefox中的显示（位于屏幕的中间）：可见，UI的样式的确不好看，而且提示信息没有标题栏。
那么可以使用自定义函数代替这个系统提供的函数吗？答案是肯定的，下面就我做的一些常识给大家说说。
我们需要的对话框函数必须要有良好的封装性，而且本人不喜欢为了个对话框还必须带上很多附加文件，因此，我将这个函数封装到一个dialog.js中，今后只要引用这个JS文件就可以使用自定义对话框。
我们的对话框是基于层DIV实现的，通过在文档流中插入一个DIV，从而显示我们的对话框，使用的函数是document.createElement("div")。
下面就是我的对话框样式：它的布局结构如上图所示，在对话框下面还有一个覆盖层，用于遮挡页面的显示。
我定义了一个函数：function showMessage(id,title,msg,width,height,colsefunc)来封装这个对话框的显示，id是最外面的div的名称，title是标题栏的内容，msg是显示的内容，width,height是对话框的宽和高，closefunc是在关闭对话框时回调的函数。
这样一个对话框已经能基本满足我们的要求了。
下面我就其中的一些核心知识点给大家讲讲。
1、创建层元素使用var div=document.createElement("div")，创建完成后，设置它的各项属性，比如div.id=id，最重要的是记得把你创建的层元素插入文档流：document.body.appendChild(div);2、创建完元素后最重要的是设置它们的CSS属性，这个在JavaScript中有对应的属性：div.style.cssText，只要设置好这个CSS属性就能显示任意样式的对话框，比如我们这个div的CSS可以这样写：position:absolute;width:"+width+"px;height:"+height+"px;background:white;border:10px solid #ccc;z-index:1002;/* 注意我们的Z轴坐标应该比较大，这样对话框才会显示在最上面*/刚才的CSS中缺少了最重要的left和top坐标的设置，因为坐标的计算是我们对话框的难点之一，首先我们需要得到浏览器可用空间的大小：var w=window.screen.availWidth;//宽度var h=window.screen.availHeight;//高度然后需要确定滚动条的位置：if(document.documentElement.scrollTop)var scrolltop=document.documentElement.scrollTop;elsevar scrolltop=document.body.scrollTop;if(document.documentElement.scrollLeft)var scrollleft=document.documentElement.scrollLeft;elsevar scrollleft=document.body.scrollLeft;由于在IE中没有指定DTD时document.documentElement.scrollTop 的值是0，需要访问document.body.scrollTop才能得到滚动条的坐标，经过测试，在三大浏览器IE、chrom、firefox中表现良好。