求助：关于使用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工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

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

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

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

See all articles

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

回复讨论(解决方案)

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題