前端把信息放在弹框里显示出来_jsp + js + 前端弹出框

在项目中，前端页面我们时常需要各种各样的弹出框：

1、alert对话框：显示含有给定消息的"JavaScript Alert"对话框

代码：

var a = "HelloWorld";

alert("对话框内容：" + a);

效果：

2、confirm对话框：显示含有给定消息的"Confirm"对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false

代码：

var a = "是否提交？";var result = confirm("提示：" +a);

alert("返回结果：" + result);

效果：

3、prompt对话框：显示一个"prompt"对话框,要求用户根据显示消息给予相应输入

//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值

var name=prompt("请输入您的名字","");if(name !="" && name != null){

alert("欢迎你，" +name);

}

效果：

4、open：打开一个新窗口,给予一个指定的名字

代码：

//open("URL","name")

open("promptBox.jsp","promptBox");

5、close：关闭当前窗口

代码：

close() ;

6、使用div和Jquery来展示：可以像模态框一样

注意：需要引入Jquery的相关库，本人引入的分别为：

代码：

//jsp页面：

文件名：

类   型：

TXT

World

PPT

Excel

备   注：

取消

确认

点击me

//js中方法//显示新建文件提示页

functionNewFile() {

$('#my_dialog').dialog({

modal :true,

width :"400",

height :"230"});

document.getElementById("my_dialog").style.display = "block";

};//新建文件确认

functionconfirm() {

$('#my_dialog').dialog("close");var fileName = document.getElementById("fileName").value; //文件名

var fileType = document.getElementById("fileType").value; //文件类型

var Remarks = document.getElementById("Remarks").value; //备注

alert("fileName:" + fileName + " fileType:" + fileType + " Remarks:" +Remarks);

};//新建文件取消

functionCancel() {

$("#fileName").val("");

$("#Remarks").val("");

$("#fileType").empty();var ops ={"txt" : "TXT","doc" : "World","pdf" : "PPT","xls" : "Excel"};var parent = document.getElementById("fileType");for ( var key inops) {var o = newOption(ops[key], key);

parent.appendChild(o);

}

sessionStorage.setItem("orderMergeStr", '');

$('#my_dialog').dialog("close");

};

效果：

注意：jquery ui dialog 右上角怎么没有显示关闭按钮

需要关闭按钮相关的图片，并且放入到对应的路径才行，具体如下：

需要在jQuery.ui.css同级目录下，建立images文件夹并且把jQuery中的图片放入进去即可。

7、使用Jquery中的fancyBox来显示

注意：需要引入Jquery的相关库，本人引入的分别为：

代码：

//index.jsp

点击me

//js

$(document).ready(function() {

$("#fancybox").fancybox({'href' : 'promptBox.jsp',//此处为显示页面URL

'width' : 900,'height' : 600,'type' : 'iframe','hideOnOverlayClick' : false,'showCloseButton' : false,'onClosed' : function() {

window.location.href= 'index.jsp';

}

});

});//promptBox.jsp

你好,这是fancyBox显示的页面，里面可以实现很多功能哦，表单提交、信息展示、提示框等等。。。

点击me，关闭此页面

效果：

8、dialog使用

$('#helpdialog').dialog({//是否创建就打开对话框，也就是是否页面一打开就显示对话框

autoOpen: false,/*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug

就是在IE6下 div无法覆盖 是否使用那该属性解决*/bgiframe:true,//设置对话框宽度

width: 600,//设置对话框高度

height: 260,/*设置对话框底部的按钮*/buttons: {"确定": function() {//单击按钮后的回调函数，就是按钮被单击后的响应事件

$(this).dialog("close");

}/*"取消": function() {

$(this).dialog("close");

}*/},/*是否为对话框添加ESC快捷键*/

//closeOnEscape: false,

//对话框是否可以被拖动

draggable:false,//打开对话框时是否使用特效

show:"slide",//关闭对话框时是否使用特效动画

hide: "slide",//是否可以调整对话框的大小

resizable:false,//调整对话框的高度和宽度极限值(当resizable:true时)

//maxHeight:520

//maxWidth:620

//minHeight:320

//minWidth:220

//是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作

modal:true,//是否可覆盖其它对话框

//stack:false

//对话框标题(也可以再div的title上进行设置)

title:"请登陆"

//设置对话框 CSS z-index 值

//zIndex:50

});//对话框的打开连接

$('#helpdialog_link').click(function(){

$('#helpdialog').dialog('open');return false;

});

});

从此处打开对话框

对话框的内容

原文链接：https://blog.csdn.net/MOONCOM/article/details/55189616