网页弹出对话框代码,html弹出窗口对话框
在Web开发中，目前因为Jquery的普及，很多弹出对话框都使用了Jquery技术，而原有的弹出对话框方法使用较少。然而，有许多控件可以用来弹出基于JQuery的对话框窗口。由于工作需要和我的爱好，我对比了近10种对话框控件，发现有一些做得不错，不仅功能强大，而且支持多种皮肤风格。甚至一些对话框的居中也被考虑在内。细节决定体验，有些真的很好。
1.实现原来的弹出对话框(也可以弹出)
我们知道，过去在没有应用其他javascript库(比如各种类型的Jquery库)的时候，通常会通过window.open或者window.showModalDialog弹出非模态或者模态的对话框，如下面的脚本所示。
函数OpenWin( sURL，sFeatures)
window.open( sURL，null，sFeatures，null)
//window.open(Sample.htm ，null， height=200，width=400，status=yes，toolbar=no，menubar=no，location=no )；
//window.open( [sURL] [，sName] [，sFeatures] [，bReplace])
//sName { _ blank；_ media_ parent_ search_ self_top}
//s features { channel mode；目录；全屏；身高；左；位置；菜单栏；可调整大小；滚动条；地位；标题栏；工具栏；顶；宽度}
函数ShowWin( sURL，sFeatures)
if(s features==null s features== ){
s features= dialog height:300 px；dialog width:850 px；状态：否；卷轴：有；可调整大小：是；求助：没有；“中心：是的，”；
var return value=window . showmodaldialog(sURL，null，sFeatures)
//window . showmodaldialog( sample . htm ，null， dialog height:591 px；对话宽度：650像素；)
//window . showmodaldialog([sURL][，vArguments] [，sFeatures])
//s features { dialog height；dialogLeftdialogTopdialogWidth居中；dialogHide边缘；求助；可调整大小；滚动；地位；未加修饰的}
if(returnValue！=未定义)
返回returnValue
其他
返回“”；
}
这是最初的方式。利弊大家都知道，就不说了。
还有一个独创的基于Jquery的弹出窗口方法。由于我一般使用easy-ui作为界面的基础组件，所以原来基于easy-ui的弹窗方法只能弹出内部的HTML层内容，对于弹出独立的页面并没有很好的支持。
脚本类型=文本/javascript
函数initDialog(divname) {
var dlg=jQuery(divname)。对话框({
没错，
可调整大小：对，
关闭：真的，
显示：“传输”，
隐藏：“传输”，
autoOpen: false，
500,
身高：250，
10分钟，
最小10分钟
dlg.parent()。appendTo(jQuery( form:first ))；
函数close(divname) {
$(divname)。对话框(“关闭”)；
/脚本
2.弹出的弹出对话框
这个popup控件的弹出对话框好像是把弹出的子页面放在父窗口里，感觉是一体的，所以也可以操作父窗口的对话框，非常方便。
这个弹出控件相对来说比较好用，但是不好的地方是不兼容Chrome等其他浏览器。其他浏览器的显示图层错位，不好看，风格也比较单一。
但是因为父窗口的脚本在弹窗中可以很好的操作，而且很好用，所以在我之前的一些项目中用的比较多。
3.AsyncBox的弹出对话框
这个控件感觉做的非常好，提供了Chrome、QQBrowser、Ext、ZCMS四个不错的表单皮肤，满足各种需求。通过修改他们的皮肤图片，你也可以定义一个适合你自己项目的风格皮肤。例如，我修改并定义了一个黄色调样式的例子。
但在使用该控件的过程中，发现与某些脚本或Jquery控件存在冲突，具体原因不明。简而言之，发现基于Jquery的zTree不能正常工作，部分Jquery组件不能正常工作。在我的Web权限管理系统中，本来想以此为弹窗显示一些设置信息，但是发现无法获取ZTree的节点选择值，相当于失败。我很郁闷，也没找到具体原因。还有一个问题，就是不知什么原因，这个控件的作者似乎已经停止了这个控件的开发，甚至连它的官网都被撤下了。
不过对于弹窗的使用，这个控件已经很不错了，提供了多种调用模块，我一般更喜欢弹出另一个页面。当然也支持页面内部弹出图层或者HTML代码等方式。
4.artDialog弹出一个对话框
这个artDialog弹出对话框组件在我看来还是挺不错的。除了支持多种浏览器，还提供了更多的界面效果。目前的版本是V4.1.6，好像还有V5.0的测试版(https://github.com/aui/artDialog)。但在V5.0中，对不支持通过art.dialog.open弹出独立网页的方法进行了调整。要实现独立网页的弹出，需要使用Iframe的代码，效果更差，所以我更喜欢V4.1.6
该控件支持中心位置的自动计算。我们只需要指定对话框的大小。当然，它支持页面中图层内容的弹出显示。不过我更关心的是独立页面的弹出对话框显示。我的应用在具体的Web权限管理系统中的效果如下图所示(结合ZTree控件，运行正常)。
这个控件提供了很多参数和方法，对于实现调用来说非常强大。
script src= http://www . cn blogs . com/jquery tools/art dialog/art dialog . source . js？ skin=blue type= text/JavaScript /script
script src= http://www . cn blogs . com/jquery tools/art dialog/plugins/iframe tools . source . js type= text/JavaScript /script
首先，封装一个通用的Javascript函数。
函数ShowArtDlg(标题、url、宽度、高度、锁定)
if (width==null width==) {
宽度= 90% ；
如果(！width.indexOf(px )！width . index of( % ){
宽度=宽度 px ；
if(width . index of( px )0 width . index of( % )0){
宽度=宽度 px ；
if (height==null height==) {
高度=90%
if(height . index of( px )0 height . index of( % )0){
height=height px
if (lock==null lock==) {
lock=false
art.dialog.open(url，{ height: height，width，title: title，lock: lock }，false)；//打开子窗体
}
页面中调用的代码如下所示。
tr align=右
a href= # icon cls= icon-edit id= btna duser onclick= showartdlg( edit-include user ， EditTree.aspx？Type=userouid= $ (# txtid )。val()， 360px ， 500 px ) runat= server edit/a nbsp。nbsp
a href= # icon cls= icon-remove id= btndedeleteuser onclick= deleteuser() runat= server remove/a
/td
/tr
如果使用5.0的ArtDialog，通过art.dialog.open调整不支持弹出独立网页的模式，仍然可以通过以下方法弹出独立网页。
Art.dialog({title:选择* * * ，
取消：是，
宽度：600，
填充：“5px”，
content: iframe src= test . aspx id= test name= test height= 400 width= 600 frame border= 0 /iframe，
ok : function(){
});
5.还有一些弹出窗口控件，也支持窗口最大化。这个功能还是不错的。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。