jsp + js + 前端弹出框

2023-09-16 07:18| 来源: 网络整理| 查看: 265

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

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中方法 //显示新建文件提示页 function NewFile() { $('#my_dialog').dialog({ modal : true, width : "400", height : "230" }); document.getElementById("my_dialog").style.display = "block"; }; //新建文件确认 function confirm() { $('#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); }; //新建文件取消 function Cancel() { $("#fileName").val(""); $("#Remarks").val(""); $("#fileType").empty(); var ops = { "txt" : "TXT", "doc" : "World", "pdf" : "PPT", "xls" : "Excel" }; var parent = document.getElementById("fileType"); for ( var key in ops) { var o = new Option(ops[key], key); parent.appendChild(o); } sessionStorage.setItem("orderMergeStr", ''); $('#my_dialog').dialog("close"); };

效果：

参考：https://blog.csdn.net/diyinqian/article/details/83691464

注意：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使用

$(document).ready(function () { //制定某个div的id 将其作为 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

【本文地址】

公司简介

联系我们