:关于使用jquery UI组件后页面被某个div遮罩导致超级连接无法点击的问题_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:28:22
原创
1503人浏览过

我使用了jquery ui组件jqgird。
正常的显示效果为:


但是我在另一个项目使用的时候,就出现了一个问题,那就是貌似页面被一个半透明的层遮罩住了,导致了页面颜色变暗和导航栏无法被点击。

出现问题的页面(整个页面大部分出现颜色变暗以及导航栏的标签无法被点击的问题):


其他正常的页面(没有使用jqgrid的页面颜色正常,导航栏可点击):


估计出现遮罩效果的div:

css:


附上页面的代码:

<%@ 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>	<head>		<base href="<%=basepath%>">		<title></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="vote">			<meta http-equiv="description" content="voting system">		<link rel="stylesheet" type="text/css"			href="css/jquery-ui-1.9.2.custom.css" />		<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />		<link href="css/votestyle.css" rel="stylesheet" type="text/css" />		<link href="css/ddsmoothmenu.css" rel="stylesheet" type="text/css" />		<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>		<script type="text/javascript" src="scripts/ddsmoothmenu.js"></script>		<script type="text/javascript"			src="scripts/jquery.kinslideshow-1.2.1.js"></script>		<script type="text/javascript" src="scripts/webtry_roll.js"></script>		<script type="text/javascript" src="scripts/utils.js"></script>		<script type="text/javascript" src="scripts/jquery-ui-1.9.2.custom.js"></script>		<script type="text/javascript" src="scripts/jquery.jqgrid.src.js"></script>		<script type="text/javascript" src="scripts/grid.locale-cn.js"></script>			<script type="text/javascript">	$(document).ready(function() {		$("#gridtable").jqgrid({			url : 'getthemes.action',//获取数据的地址			datatype : "json",			height : 300,			autowidth : true,			colnames : [ '主题id', '主题', '主题内容', '发起人' ],			colmodel : [ {				name : "id",				index : "id",				label : "主题id",				width : 30,				sortable : true,				resizable : true			}, {				name : "themename",				index : "themename",				label : "主题",				width : 50,				sortable : true,				resizable : true			}, {				name : "themecontent",				index : "themecontent",				label : "主题内容",				width : 120,				sortable : true,				resizable : true			}, {				name : "creator",				index : "creator",				label : "发起人",				width : 60,				sortable : false,				resizable : true			}, ],			sortname : 'themeid',			sortorder : 'desc',			viewrecords : true,			rownum : 10,			rowlist : [ 10, 20, 30 ],			jsonreader : {				root : "datarows", // 数据行(默认为:rows)				page : "curpage", // 当前页				total : "totalpages", // 总页数				records : "totalrecords", // 总记录数				repeatitems : false			// 设置成false,在后台设置值的时候,可以乱序。且并非每个值都得设			},			prmnames : {				rows : "page.pagesize",				page : "page.curpageno",				sort : "page.orderby",				order : "page.order"			},			pager : "#gridpager",			caption : "我的投票",			oncellselect : function(id) {				window.location.href = "test.html?id=" + id;			}		}).navgrid('#gridpager', {			edit : false,			add : false,			del : false		});	});</script>	</head>	<body>		<div id="mainw">			<div id="topspace">				<div id="log">					<%						string userid = (string) session.getattribute("id");						if (userid == null) {							out.println("<a href='login.jsp' >登录</a>" + "|"									+ "<a href='register.jsp' >注册</a>");						} else {							out.println("<a href='logout.action' >退出系统</a>");						}					%>				</div>			</div>			<div id="menuspace" class="ddsmoothmenu">				<ul>					<li>						<a href="index.jsp" title="主页" id="menu_selected"> <span>主页</span>						</a>					</li>					<%						if (userid != null) {							out.println("<li><a href='owntheme.jsp' title='我的主题'> <span>我的主题</span></a></li><li><a href='getuserdata.action' title='资料管理'> <span>资料管理</span> </a></li>");							string usertype = (string) session.getattribute("usertype");							if ("admin".equals(usertype)) {								out.println("<li><a href='thememanagement.jsp' title='主题管理'> <span>主题管理</span></a></li><li><a href='addadmin.jsp' title='创建管理员'> <span>创建管理员</span></a></li>");							}						}					%>				</ul>			</div>			<div id="contentspace">				<table id="gridtable"></table>				<div id="gridpager"></div>			</div>			<div id="copyright">				copyright &copy;2012  bbb  all rights reserved.				<br />				<span>地址: </span>zhbit				<span>邮编: </span>519085				<br />				<span>联系人: </span>bbb				<span>手机: </span>123456				<br />				<span>邮箱: </span>bb@hotmail.com			</div>		</div>	</body>	</body></html>


回复讨论(解决方案)

给contentSpace加上position: relative;

给contentSpace加上position: relative;

真的解决了,谢谢你!不过我想请你继续解释一下这个问题的因由,可以吗?

给contentSpace加上position: relative;
 请问这个怎么改哦?

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号