JSP/HTML页面弹出框

最新推荐文章于 2024-03-15 14:29:48 发布

林家小米

最新推荐文章于 2024-03-15 14:29:48 发布

阅读量2w

点赞数 10

本文链接：https://blog.csdn.net/oxinliang12/article/details/52869705

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：项目中要求点击某个按钮，弹出一个对话框，输入数据，提交。
首先来分析一下，在A页面输入N多数据，然后点击提交按钮，弹出一个新的对话框B，对话框B里也要输入N多数据，在弹出的对话框B里点击提交，要把A页面和对话框B的数据提交到后台Controller里。
以前没做过此类需求，但是大概能猜到，点击按钮弹出div对话框即可。

度娘之后，了解到JQuery里有JQuery UI Dialog组件可以实现简单的弹出框，源代码如下：

<html>
	<head>
		<link rel="stylesheet" href="css/jquery-ui.css">  
            <script type="text/javascript" src="js/jquery.js"></script>  
            <script type="text/javascript" src="js/jquery-ui.js"></script>
		<script type="text/javascript">
			$(function() {  
                                $("#dialogId").hide();  
                        });
                        function showDialog() {
                                $("#dialogId").dialog({
                                        height: 300,
                                        width: 200,
                                        // 模态开启  
                                        modal: true,
                                        // 是否可拖拽  
                                        draggable: false,
                                        // 最小宽度  
                                        minWidth: 300,
                                        buttons: {  
                                                "提交": function() {
                        	                        $("#form").submit();
                                                },
                		                "取消": function() {
                			                $(this).dialog("close");
                		                }
                                        }
                                 });  
                        }
		</script>
	</head>
	<body>
		<form id="form" action="xxx.action" method="post">
			<table>
				<thead>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>lily</td>
						<td>female</td>
						<td>18</td>
					</tr>
					<tr>
						<td>2</td>
						<td>lucy</td>
						<td>female</td>
						<td>18</td>
					</tr>
					<tr>
						<td>3</td>
						<td>tom</td>
						<td>male</td>
						<td>20</td>
					</tr>
				</tbody>
			</table>
			<div id="dialogId" title="保密信息"> 
	                        <div>
					<label>身份证号：</label>
					<input name="idCard" type="text"/>
				</div>
				<div>
					<label>手机号码：</label>
					<input name="phoneNum" type="text"/>
				</div> 
	                </div> 
			<div>
				<div class="control-group" style="margin-top:12px;margin-left:300px">
					<input name="auditStatus" class="btn btn-primary" type="button" οnclick='showDialog();' value="点我"/>
				</div>
			</div>
		</form>
	</body>
</html>

到此为止，已达到需求，下面就需要测试了。如下图所示：

弹出框的右上角关闭按钮没有很好的显示出来，这个是css样式的问题。由于本人css很渣，所以采用如下方法：

将css样式换成远程地址，也就是将代码<link rel="stylesheet" href="css/jquery-ui.css">

换成<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">即可，再次测试如下图：

下面我们可以测试在弹出框里填写数据了，那么问题来了，在弹出框里填写完数据之后想重新填数据，通过点击取消或者右上角的x按钮来关闭弹出框，在点击'点我'按钮时，弹出框仍带有上次填入的数据。也就是说关闭了弹出框之后，其实数据是没有清除了的。

分析下出现这种现象的问题：

使用JQuery的Dialog控件时，JQuery会将创建的dialog缓存到页面上，生成一些隐藏的div，当再次创建dialog时，由于id相同总会调用到缓存中的dialog，导致每次打开dialog时总是把上次的内容显示出来(当然，如果刷新了页面的话，是没有数据的)，查了一些资料，有提到要用dialog的destroy方法的，第一次打开dialog时没问题，关闭之后在重新打开就会报错了，这种方法不可行。destroy销毁的JQuery UI生成dialog的时候那些同时生成的html不会销毁元素本身，要想销毁元素要用到remove。

给出代码：

<script type="text/javascript">
        $(function() { 
                $("#dialogId").hide();
        });
        function showDialog() {
                $("#dialogId").dialog({
                        height: 300, 
                        width: 200,
                        // 模态开启 
                        modal:true, 
                        // 是否可拖拽 
                        draggable: false, 
                        // 最小宽度 
                        minWidth: 300,
                        buttons: { 
                                "提交": function() { 
                                        $("#form").submit(); 
                                }, 
                                "取消": function() { 
                                        $(this).dialog("close"); 
                                } 
                         }, 
                         close: function() { 
                                $(this).remove(); 
                         } 
                 }); 
         }
</script>

上面的方法可以把Dialog彻底清除，但又引发了另一个严重的问题，remove也把Dialog中的DIV清除了。

为何会出现这种情况：页面中通常是自建一个DIV，通过IDV的id绑定Dialog，而JQuery会把这个自建的DIV清除，内容全部放到Dialog的DIV中，Dialog的DIV默认是在body中，这对于使用ajax重写页面代码的应用产生了很多的冲突，如果使用上面的方法，Dialog只能弹出一次，关闭的时候就会被remove。

解决方案：在调用JQuery Dialog组件之前把自建的div先clone一份，关闭dialog之后把clone的div重新append到页面上。

给出代码：

<script type="text/javascript">
        $(function() {
	        $("#dialogId").hide();
	}); 
	function showDialog() {
                var divID = $("#dialogId");
                var dialogParent = $("#dialogId").parent();
                var dialogOwn = divID.clone();
                dialogOwn.hide();
                $("#dialogId").dialog({
                        height: 300,
                        width: 200,
                        // 模态开启
                        modal:true,
                        // 是否可拖拽
                        draggable: false,
                        // 最小宽度
                        minWidth:300,
                        buttons: {
                                "提交": function() {
                                        $("#form").submit();
                                },
                                "取消": function() {
                                        $(this).dialog("close");
                                }
                        },
                        close: function() {
                                dialogOwn.appendTo(dialogParent);  
                                $(this).dialog("destroy").remove();
                        }
                  });
          }
</script>

源码如下：

源码位置

其中，goodDialog.jsp页面能显示出弹出框，但是关闭按钮显示不出；

betterDialog.jsp页面在goodDialog.jsp的基础上能正常显示出关闭按钮，但是关闭按钮后，再次点击时弹出框会带出上次填写的数据；

bestDialog.jsp页面修复betterDialog.jsp的bug。此页面再无其它bug，为最终版。

林家小米

关注

10
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
JSP/HTML页面弹出框

需求：项目中要求点击某个按钮，弹出一个对话框，输入数据，提交。首先来分析一下，在A页面输入N多数据，然后点击提交按钮，弹出一个新的对话框B，对话框B里也要输入N多数据，在弹出的对话框B里点击提交，要把A页面和对话框B的数据提交到后台Controller里。以前没做过此类需求，但是大概能猜到，点击按钮弹出div对话框即可。度娘之后，了解到JQuery里有JQuery UI Dialog组
复制链接

扫一扫