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

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:43 AM

本帖最后由 bbsince1991 于 2013-05-18 11:44:13 编辑

我使用了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; 真的解决了，谢谢你！不过我想请你继续解释一下这个问题的因由，可以吗？

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7781

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。