JQuery弹出层示例可自定义

2020-05-16 18:47:13易采站长站整理

1、创建一个jsp页面,内容如下,js和css根据自己的实际情况而定

<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Insert title here</title>
<link href=”Share.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”../js/common/jquery-1.11.0.js”></script>
<script type=”text/javascript” src=”popup.js”></script>
<script type=”text/javascript” src=”testPopup.js”></script>
</head>
<body>
<div id=”right”>
<div class=”right_nav”>
<h1>用户管理</h1>
<a href=”#” onclick=”” class=”but_tj”>添加</a>
</div>
<div class=”overlay” id=”spm” style=”display: none;”></div><!– 将弹出层下面的页面变成不可操作状态,成半透明状态 –>
<div class=”Popup” style=”display: none”>,<!– 隐藏div –>
<div class=”Popup_top”>
<h1>添加</h1>
<a href=”#” class=”Close”><img alt=”关闭” src=”close.png” /></a>
</div>
<div class=”Popup_cen”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”BD_tab”>
<tr>
<td style=”width: 110px;” align=”right”>姓名:</td>
<td><input name=”” id=”name” type=”text” class=”input220″
onfocus=”this.className=’input220L’;this.onmouseout=””
onblur=”this.className=’input220′;this.onmouseout=function(){this.className=’input220′};”
onmousemove=”this.className=’input220Lg'”
onmouseout=”this.className=’input220′”> <font color=”red”>*</font></td>
</tr>
<tr>
<td align=”right”>昵称:</td>
<td><input name=”” id=”nickname” type=”text” class=”input220″
onfocus=”this.className=’input220L’;this.onmouseout=””
onblur=”this.className=’input220′;this.onmouseout=function(){this.className=’input220′};”