showModalDialog简单案例及使用

最新推荐文章于 2017-03-28 14:09:28 发布

爱上冬日暖阳

最新推荐文章于 2017-03-28 14:09:28 发布

阅读量845

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq931399960/article/details/45217839

版权

js 专栏收录该内容

5 篇文章

订阅专栏

本文提供了一个showModalDialog方法的简单应用案例，讲述了如何在网页中通过该方法实现弹窗显示数据，特别是在更新用户信息或修改数据时的操作。通过示例代码展示了如何正确构建URL，避免额外内容的添加，以及从数据库请求域获取并展示对象数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目录结构：

  <body>
    <a href="javascript:void(0);" id="addUser" οnclick="openWindow('views/user/addUser.jsp')">添加用户</a>
  </body>
  <script type="text/javascript">
  	function openWindow(url){
  		//设置模式窗口的一些状态值
  		var windowStatus = "dialogWidth:1000px;dialogHeight:700px;center:1;status:0;";
  		var data = {
  		msg:"添加用戶",
  		};
  		//将模式窗口返回的值临时保存
  		var temp = showModalDialog(url,data,windowStatus);
  };

在addUser.jsp中获取传递的参数，即获取到“添加用户”信息。

<body>
	<h3><script type="text/javascript">document.write(window.dialogArguments.msg)</script> </h3>
	<h1 id="h1"></h1>
	<form action="${pageContext.request.contextPath }/saveUser"
		method="post">
		用户名：<input type="text" name="userName" /><br /> 
		<input type="submit"value="保存"><br />
	    <input type="button" value="点击获取闯过来的参数" οnclick="getData();"/>
	</form>
</body>
<script type="text/javascript">
 function getData() {  
        var args = window.dialogArguments;  
        alert(args.msg);//弹出框内容：添加用户  
    }  
   
document.getElementById("h1").innerHTML=window.dialogArguments.msg;
</script>

有时和其他方法一起放到一个<script></script>中可能会失效。

有时url会有些不对，总是会多加一些东西在上面，这时候url可以使用：

这种形式。

小例子：

当对一个数据进行修改的时候，点击页面中的修改按钮，然后弹出一个框，并且在这个框内显示要修改的当前对象的数据。

<!doctype html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>spring-mvc-showcase</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="<c:url value="/resources/css/bootstrap.css" />" rel="stylesheet" />
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link href="<c:url value="/resources/css/bootstrap-theme.css" />" rel="stylesheet" />
</head>
<body>
		<div class="container">
				<h2>${result}</h2>
				<button value="show result" id="show">show</button>
		</div>
		<table>
			<tr>
				<td>id</td>
				<td>content</td>
				<td>操作</td>
			<c:forEach items="${list }" var="s">
				<tr>
					<td>${s.id }</td>
					<td>${s.content }</td>
					<td>
<a href="javascript:void(0);" οnclick="openWindow('<c:url value="/views/alarm/updateSyslogAlarm.jsp"/>',{id:'${s.id }',content:'${s.content }'})">修改</a>
<a href="javascript:if(confirm('确认删除？')) window.location='<c:url value="/syslog/deleteSyslogAlarm?id=${s.id }"/>'">删除</a>
                                        </td>
				</tr>
			</c:forEach>
			
		</table>
		
		
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.11.2.js"/> "></script>
		<script type="text/javascript" src=" <c:url value="/resources/js/bootstrap.js"/> "></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#show").click(function() {
					var r = <%=request.getAttribute("result")%>;
					alert(r[0].id);
					alert(r[0].content);
				});
			});
		</script>
		<script type="text/javascript">
  		function openWindow(url,data){
  			//设置模式窗口的一些状态值
  			var windowStatus = "dialogWidth:1000px;dialogHeight:700px;center:1;status:0;";
  			/* var data = {
  			msg:"添加用戶",
  			}; */
  			//将模式窗口返回的值临时保存
  			var temp = showModalDialog(url,data,windowStatus);
 		 	};
 		 </script>
		
</body>

其中${list}是从数据库的request域（如果是springmvc的话可以为map对象的key）中取的List集合，集合里面放的是对象，对象两个属性分别为id和content

弹出框：updateSyslogAlarm.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'updateSyslogAlarm.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
 	<form action="" method="post">
 		 id: <input type="hidden" name="id" id="id"><br/>
   		content:<input type="text" name="content" id="content"><br/>
   		<input type="submit" value="修改">
 	</form>
  </body>
  <script type="text/javascript">
  alert(window.dialogArguments.content);
  document.getElementById("id").value=window.dialogArguments.id;
  document.getElementById("content").value=window.dialogArguments.content;
  </script>
</html>