点击按钮显示一个弹出框,点击一个弹出框以外的区域,隐藏弹出框

    点击按钮显示一个div,点击一个div以外的区域,隐藏div,实用于一些弹出框显示选择数据时而不选择的操作。有点跟QQ邮箱的分页跳转一样的效果。废话不多说,附上一个可测试的页面,当然需要运用到jquery,版本根据你自己的实际情况修改。后缀是.jsp,本来打算用html就不用部署到项目中,但是貌似html的onblur没有执行到,所以还是jsp。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="00"/>
<meta name="description" content="0"/>
<title>test</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.js"></script>
</head>
<script type="text/javascript">
 function show2(){
  $("#gotodiv").css("display","block");
  $("#goto").focus();
 }
 function show(){
  $("#gotodiv").css("display","block");
  $("#goto").focus();
  $("#goto").attr("onblur","");
 }
 function noshow(){
  $("#goto").attr("onblur","fadeOut()");
 }
 function fadeOut(){
  $("#gotodiv").css("display","none");
 }
</script>
<body>
 
<div class="wp">
 
 
   <input type="button" value="转页" onclick="show2()">
  
   <div style="display:none;width:150px;border:solid 1px #A0A0A0;margin:0;height:40px;" id="gotodiv" onmouseover="show('gotodiv')" onmouseout="noshow()">
   <span style="color:#798699">跳转到</span>
   <input type="text" id="goto" style="width:30px" onblur="fadeOut()">
   <span style="color:#798699">页</span>
   <input type="button" value="确定" style="width:50px" onclick="fadeOut()"/>
  </div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/lj88811498/article/details/38320069
0条评论
添加一条新回复