点击按钮显示一个弹出框，点击一个弹出框以外的区域，隐藏弹出框
来源：互联网 发布：html css js 拼图游戏 编辑：程序博客网 时间：2024/04/28 19:16
点击按钮显示一个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>
- 点击按钮显示一个弹出框，点击一个弹出框以外的区域，隐藏弹出框
- 做一个弹出视图框的例子，点击一个按钮，弹出一个视图框[转]
- 点击按钮弹出框
- 点击弹出框之的外的地方，隐藏弹出区域。
- 点击按钮弹出下载框
- 点击一个按钮，弹出一个窗口
- Android 点击一个按钮，弹出一个对话框
- Echarts 点击地图区域弹出框
- 点击弹出一个层
- asp.net 点击按钮弹出一个页面
- ProgressDialog 通过点击按钮，弹出一个对话框
- 点击一个按钮弹出两次问题
- jQuery实现点击按钮弹出一个div，点击其他区域关闭该div
- c# 点击关闭按钮弹出确认框
- Android 点击按钮弹出提示框实例
- 点击弹出日历框
- 点击弹出提示框
- 点击弹出日历框
- Cocos2d-x 程序是如何开始运行与结束的
- 学生信息管理系统总结
- vmware虚拟机上ubuntu不能连上外网解决办法
- JAVA是无处不在！
- Cocos2d-x 2.x版本创建工程方式
- 点击按钮显示一个弹出框，点击一个弹出框以外的区域，隐藏弹出框
- hdu1619
- 不要再上当了：世界上本没有wifi密码破解器
- Java开发人员和就业市场
- 望
- 我的主持梦
- 一年又一年
- 查看端口状态及关闭
- 爱
